Wie man die Größe von Elementen im Hauptmenü für verschiedene Bildschirmauflösungen ändert

Von diesem Tutorial erfahren Sie, wie man die Größe von Elementen im Hauptmenü für verschiedene Bildschirmauflösungen ändert und das Hauptmenü als eine Zeile speichert.

Wie man die Größe von Elementen im Hauptmenü für verschiedene Bildschirmauflösungen ändert

Unsere Vorlagen wurden so entwickelt, dass sie Menüelemente so groß wie möglich und ohne den Übergang auf die nächste Zeile speichern. Es ist wichtig sowohl für bequeme Navigation als auch für besseres Nutzererlebnis auf der Website. Manchmal brauchen Sie mehr Elemente im Menü als es ursprünglich in der Vorlage gibt. Als Ergebnis kann der Teil des Menüs auf die nächste Zeile verschoben werden. Um dieses Problem zu lösen, müssen Sie die Schriftgröße (font-size) von Menüelementen verkleinen. Wir zeigen Ihnen, wie man das Menü als eine Zeile für verschiedene Bildschirmauflösungen speichert:

Um die Schriftgröße (font-size) zu ändern, sollen Sie das Folgende machen:

1. Finden Sie den CSS-Selektor, für den das Attribut Schriftgröße (font-size) für das Menüelement festgelegt wurde. Dafür brauchen Sie das Entwicklerwerkzeug (FireBug oder Google Web Inspector). Sie sollen den Link des Menüs überprüfen und die Stelle im Code finden, wo für ihn die Schriftgröße festgelegt wurde. Normalerweise wird sie für das Element festgelegt. Die Schriftgröße kann auch in vereinfachtem Schriftattribute festgelegt werden. Achten Sie bitte auf das folgende Beispiel:

   			.sf-menu > li > a {
   			font: bold 19px/22px Open Sans;
   			}
   		

   wo 19px/22px die Schriftgrößr/Zeilenhöhe definiert:

   

2. Nachdem Sie den CSS-Selektor haben, können Sie eigene Regel erstellen. Bevor Sie sie erstellen, wählen Sie passende Schriftgröße (font-size) aus, indem Sie die Attributwerte im Entwicklerwerkzeug ändern. Nachdem Sie die passende Schriftgröße Schriftgröße (font-size), die Ihr Menü als eine Zeile dargestellt wird, ausgewählt haben, können Sie die Regel erstellen. Zum Beispiel:

   		.sf-menu > li > a {
   		font-size: 16px !important;
   		}
   	

   Achten Sie auf das Attribut !important. Abhängig von der Engine und Datei, zu der Sie den Code hinzufügen, kann es nötig sein, die Regel als wichtig zu definieren, damit sie höhere Priorität als der Wert standardmäßig hat. Versuchen Sie die Regel ohne diese Eigenschaft zu nutzen. Wenn die Regel nicht funktioniert, nutzen Sie dann das Attribut !important.

3. Wählen Sie die Datei aus, zu der Sie den Code hinzufügen. Sie können ihn zu jeder CSS Datei Ihrer Website hinzufügen, aber es gibt Dateien, zu denen, Sie CSS Regeln hinzufügen müssen. Wir haben für Sie die Liste von solchen Dateien für verschiedene Engines vorbereitet:

   CMS Vorlagen:

   • WordPress Themes (WooCommerce/Jigoshop Themes) /wp-content/themes/themeXXXXX/style.css
   • Joomla Vorlagen (Vorlagen VirtueMart) /templates/themeXXXX/css/template.css
   • Drupal Vorlagen /sites/all/themes/themeXXX/css/style.css
   • Web Vorlagen (HTML5) /css/style.css

   Vorlagen für Online-Shops:

   • Magento Themes /skin/frontend/default/themeXXX/css/styles.css
   • PrestaShop Themes /themes/themeXXXX/css/global.css
   • OpenCart Vorlagen /catalog/view/theme/themeXXX/stylesheet/stylesheet.css
   • ZenCart Vorlagen /includes/templates/themeXXX/css/stylesheet.css
   • osCommerce Vorlagen /css/stylesheet.css
   • Shopify Themes style.css.liquid

4. Sie sollen jetzt den Wert Schriftgröße (font-size) für jede bestimmte Bildschirmauflösung festlegen. Um dies zu machen, fügen Sie den Code @media für jede Bildschirmgröße ein. Nutzen Sie das Entwicklerwerkzeug, um passende Schriftgröße auszuwählen. Unten finden Sie die Anfragenliste @media, die für Sie vorbereitet wurde:

   	  
   			@media only screen and (min-width: 768px) {
   			.sf-menu > li > a {
   			font-size: 11px !important;
   			}
   			}		  
   			@media only screen and (min-width: 980px) {
   			.sf-menu > li > a {
   			font-size: 14px !important;
   			}
   			}		  
   			@media only screen and (min-width: 1280px) {
   			.sf-menu > li > a {
   			font-size: 16px !important;
   			}
   			}
   		

5. Speichern Sie die Änderungen in der CSS Datei und laden Sie sie auf den Server hoch. Als Ergebnis erhalten Sie das Folgende:

   

Sie können auch das ausfuhrliche Video-Tutorial nutzen:

Wie man die Größe von Elementen im Hauptmenü für verschiedene Bildschirmauflösungen ändert