MOBILE BREAKPOINT - SECONDARY MENU

Hi there,

This should be helpful:
https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

Let me know if it works for you :)

Hi,

Thanks for the help.

It worked but I have two problems:

1- I Can't change the colors of the menu (background, font...)

2- The Menu Item Width doesn't work on mobile.

1- I Can’t change the colors of the menu (background, font…)

You are using Header element to merge the header with content, have you set any navigation color in the Header element?

You can find the the header element at appearance > elements.

2- The Menu Item Width doesn’t work on mobile.

Can you try remove this CSS:

.secondary-navigation .menu-toggle {
      display: none;
}

@media(max-width: 768px) {
    .secondary-navigation {
        text-align: center !important;
    }
    .secondary-navigation ul {
        display: block;
    }
    .secondary-navigation .sf-menu>li {
        float: none;
        display: inline-block !important;
    }
}

Add CSS instead:

@media (max-width: 768px) {
.secondary-nav-aligned-center .secondary-navigation .main-nav>ul {
    justify-content: space-around;
}
}

And check if you set a proper menu item height at customizer > layout > secondary navigation.

Let me know if you need further assistance :)

Thanks!

You are welcome :)