[Resolved] Primary menu specific width

Home Forums Support Primary menu specific width

This topic contains 5 replies, has 3 voices, and was last updated by  David 1 month, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1248306


    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 Customer Support

    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



    David Customer Support

    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!


    David Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.