Hallo :-)
ich habe sehr viele Menüpunkte in meiner Navigation, daher erstreckt sie sich über 2 Zeilen (siehe Screenshots).
Links und rechts gibt es aber immer noch ein wenig Platz. Wo kann ich den verkleinern?
Wenn es möglich ist, hätte ich gerne alle Menüpunkte in der zweiten Zeile, außer die „Startseite“, die kann in die obere Zeile. (Falls ich es schaffe, würde ich dann in die obere Menüzeile rechts gerne das Suchformular einfügen.) Kann mir da jemand von euch einen Tipp geben?
Firebug zeigt mir für das Menü folgenden Code an:
#access {
background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}
style.css (Zeile 544)
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}Das Herumspielen bei "margin: 0 auto 6px" o.ä. hat nicht geholfen. Das betrifft immer nur den kompletten Menükasten und eben nicht den Abstand vom Rand zum ersten Menüpunkt.
Ich bin euch wirklich für jede Hilfe und jeden Tipp dankbar!
Hier meine Daten:
WordPress Version 3.3
Theme: TwentyEleven, habe dazu ein Child Theme erstellt
Plugins: Custom Headers and Footers, Under Construction, MaxButtons, WP Utility Shortcodes
URL: Ich darf die Webseite erst wenn sie komplett fertig ist öffentlich machen, daher bringt ein Link nichts (es kommt nur eine „Coming soon“-Seite).
Ich lade dafür aber auf jeden Fall Screenshots hoch, und falls dabei etwas fehlt, hole ich das gerne nach und lade es auch hoch. Ich fände es schade, wenn mir wegen fehlendem Link keiner helfen würde, ich kann schließlich nichts dafür! Und ich bemühe mich wirklich, so viel wie möglich selber zu erarbeiten und probiere ewig rum bevor ich eine Frage stelle.
Vielen Dank!
Hier sicherheitshalber mal noch den Menu-Code aus dem Style Sheet:
/* =Menu
-------------------------------------------------------------- */
#access {
background: #222; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252525, #0a0a0a);
background: -o-linear-gradient(#252525, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
background: -webkit-linear-gradient(#252525, #0a0a0a);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
}
#access li:hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
#access ul li:hover > ul {
display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}