Topic: Dynamically change secondary menu mobile breakpoint

willGreeny
March 26, 2024 at 11:58 pm

Hi there,

I have a secondary menu that has a varying amount of content per category (or book):

Is there a way that when the menu goes to two lines, it automatically breaks to mobile?

Kind regards,

Will
Alvind
March 27, 2024 at 12:53 am

Hi there,

What did you use to build the secondary menu? A link to your site would be helpful too.
willGreeny
March 27, 2024 at 12:59 am

Hi Alvind,

It’s a standard secondary navigation menu that is put after the header using GP hook.

I’ve attached details of the staging.

I also have another issue the whole width I want to have a background, and the secondary menu to be contained to the width of the website – is there a way to do this too?

Kind regards,

Will
David
March 27, 2024 at 3:10 am
Hi there,

unfortunately theres no easy way to do that. Even Javascript couldn’t easily determine a flex row would span 2+ rows.

The most i can offer is some CSS to make the nav scrollable on smaller screens:
```
@media(min-width: 769px) {
    .secondary-navigation {
        overflow-y: hidden;
    }
    nav.secondary-navigation .main-nav>ul {
        flex-wrap: nowrap; 
    }
    .secondary-navigation li {
        min-width: max-content;
    }
}
```
Its nothing fancy but it at least keeps the nav to a single row.
willGreeny
March 27, 2024 at 7:41 am

Okay thanks for that David, that is still a great help.
David
March 28, 2024 at 4:17 am

You’re welcome

Viewing 6 posts - 1 through 6 (of 6 total)

Dynamically change secondary menu mobile breakpoint