Wie füge ich einen Button in die Navigation ein?

In dieser Anleitung zeigen wir dir, wie du einen Menüpunkt in einen Button umwandeln kannst. Dazu musst du dem Menüpunkt eine eigene CSS-Klasse zuweisen und kannst diese dann über ein bisschen CSS-Code gestalten.

Füge einen Menüpunkt hinzu, welcher zu einem Button werden soll:

Im Backend deiner Spreadmind Webseite gehst du zu "Webseite" > "Menüs" und wählst dein gewünschtes Menü zum Bearbeiten aus.

Füge über die linke Spalte entweder eine Seite oder einen "individuellen Link" deinem Menü hinzu.

Klicke nun bei dem neuen Menüpunkt rechts auf den Pfeil, um die weiteren Optionen anzuzeigen:

Trage in das Feld "CSS-Klasse" einen eigenen Klassen-Namen ein. Sollte das Feld nicht sichtbar sein, so stelle bitte rechts oben über den Tab "Ansicht anpassen" sicher, dass der Haken bei "CSS-Klasse" gesetzt ist:

Tipp: Am besten ist es, den CSS-Klassennamen mit einem Prefix zu versehen, damit dieser nicht mit anderen gleichen CSS-Klassennamen in Konflikt gerät. Bspw. ss-nav-button o.ä.

Klicke auf den orangenen Button Menü speichern.

CSS-Regeln für das Design des Buttons hinzufügen:

Kopiere nun den folgenden CSS-Code und füge ihn im Backend deiner Spreadmind Webseite unter "Design" > "Theme Optionen" > "General" ganz unten bei "Benutzerdefiniertes CSS" ein. Ändere den Klassennamen ss-nav-button, solltest du einen anderen verwenden:

#main-header #top-menu .ss-nav-button a { 
	padding: 8px;
	background-color: #ffbb00;
	color: #ffffff; 
	border-radius: 5px;
	box-shadow: 0 2px 3px 0 #c2c2c2;
}

padding = Abstand des Textes zum Button-Rand
background-color = Hintergrundfarbe des Buttons
color = Schriftfarbe des Buttons
border-radius = abgerundete Ecken
box-shadow = Schlagschatten

Ergebnis: