[Resolved] Secondary Navigation – Mobile Dropdown at All Widths

[Tom]

Hi all,

I’m hoping you can help please.

I’ve created a secondary navigation menu and positioned it below the header; the menu contains 12 links.

I’d like the secondary navigation to always be the mobile version—no matter the screen size—so that the links are not visible unless you click the dropdown. At the moment, the mobile menu obviously only shows at the mobile breakpoint—is there a way to change this so that it functions this way for all screen widths?

Many thanks in advance,
Tom

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Tom]

Hi Leo,

Thanks for your reply.

I’ve included a link in the private info field to a “dummy” website, with an example of the kind of menu I’m trying to create.

The secondary navigation contains “Link 1”, “Link 2”, “Link 3”, etc.

Below screen width 768px, the “Menu” icon appears and the navigation can be expanded/collapsed to show/hide the links. I’d like the menu to always be in this state, even in tablet & desktop screen sizes.

I hope this make sense.

Many thanks,
Tom

[David]

Hi there,

try adding this CSS:

.secondary-navigation .menu-toggle {
    display:block
}

.secondary-navigation ul, .secondary-navigation:not(.toggled) .main-nav > ul {
    display:none
}

.secondary-navigation.toggled .main-nav {
    flex-basis: 100%;
    order:3
}

.secondary-nav-aligned-left .secondary-navigation.has-top-bar .menu-toggle {
    text-align:left
}

.secondary-nav-aligned-left .secondary-navigation .top-bar {
    order:2
}

.secondary-nav-aligned-right .secondary-navigation.has-top-bar .menu-toggle {
    text-align:right
}

.secondary-navigation.has-top-bar .top-bar .inside-top-bar .widget {
    margin:0 20px
}

.secondary-nav-aligned-center .secondary-navigation .top-bar {
    flex-basis:100%
}

.secondary-nav-float-right .secondary-navigation {
    margin-left: 0;
    width: 100%;
    margin-top:1.5em
}

.secondary-nav-float-right .header-widget {
    margin-left:auto
}

.secondary-nav-float-left .multi-navigation-wrapper, .secondary-nav-float-left .secondary-navigation {
    margin-left: 0;
    width: 100%;
    margin-top:1.5em
}

.secondary-nav-float-left:not(.nav-float-right) .header-widget {
    margin-left: auto;
    margin-right: auto;
    order:unset
}

.secondary-nav-float-left .site-branding, .secondary-nav-float-left .site-logo {
    order:unset
}

.secondary-navigation.has-menu-bar-items .inside-navigation, .secondary-navigation.has-top-bar .inside-navigation {
    justify-content: space-between
}

[Tom]

Thank you so much David—this has worked perfectly and is exactly what I wanted to achieve.

Thanks very much,
Tom

[David]

Glad to be of help!

[Author]

Posts