[Resolved] Primary menu specific width

[Top-Fit-Gesund]

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

[Leo]

Hi there,

You can try this CSS to set the container width of the primary navigation:

.inside-navigation.grid-container {
    max-width: 700px;
}

[Top-Fit-Gesund]

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

[David]

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;
}

[Top-Fit-Gesund]

Thanks, David! It works exactly like I imagined… Great!

[David]

Glad to be of help

[Author]

Posts