Archived topic
Primary menu specific width
5 replies · Started by Top-Fit-Gesund on April 21, 2020
Hello again, I have another question about the "primary menu". How can I set the menu width, say, to 70 percent. The rest of the window should remain visible. For example like here: m.tagessspiegel.de.
Many thanks, Rainer
Hi there,
You can try this CSS to set the container width of the primary navigation:
.inside-navigation.grid-container {
max-width: 700px;
}Hello, Leo,
thanks for the answer! I think I was unclear: How can I reduce the width of the displayed menu field. From "like content" to for example 70%? See image. And that quite naturally as an overlay to main content...
2nd question: How can I change the search icon and menu in the header, from left to right vice versa?
Thanks, Rainer
Hi there,
use this CSS to adjust the width and position the menu over the content:
@media (min-width: 769px) {
.main-navigation.toggled .main-nav>ul {
position: absolute;
top: 60px;
left: 0;
right: 30%;
background-color: #427c15;
}
}For the navigation element order - change the CSS i provided here for this:
.main-navigation.has-branding {
position: relative;
}
.navigation-branding {
position: absolute;
margin-left: 0 !important;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.main-navigation.has-branding .menu-toggle {
order: -1 !important;
margin-right: auto;
}Thanks, David! It works exactly like I imagined... Great!
Glad to be of help
