[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
    Posts
  • #1248306

    Rainer

    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

    #1248438

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

    Rainer

    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

    demo

    #1250906

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

    Rainer

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

    #1251263

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

You must be logged in to reply to this topic.