Archived topic

Secondary Navigation - Mobile Dropdown at All Widths

5 replies · Started by Tom on May 1, 2021

Viewing posts 1–6 of 6

May 1, 2021 at 7:45 am #1759267

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

May 1, 2021 at 10:50 am #1759446

Hi there,

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

You can use the private information field.

Let me know :)

May 2, 2021 at 5:13 am #1760163

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

May 2, 2021 at 1:33 pm #1760889

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
}

May 3, 2021 at 2:56 am #1761525

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

Thanks very much,
Tom

May 3, 2021 at 4:15 am #1761647

Glad to be of help!

This archived topic is closed to new replies.

Start building better websites today.