[Resolved] Secondary navigation element button styling

[Carsten]

Hi there, it’s just created in an element, no classes created. Apparently class for hover is not created neither, why does hover work without class definition.

I have been looking around for this topic without any solution, any documentation on how to create thecurrent-menu-item class for the sub-nav?

Regards

[Leo]

Hover is a pseudo selector so can be used on every element.

current-menu-item would require javascript to add it in (it’s not a theme issue so we cannot help with this)- it’s available by default when you use WordPress menu system.

Would you consider actually using the secondary navigation instead of using a custom element?

[Carsten]

Yes, defiantly, if I can have the same position, I don’t need a custom element, no need to make it more complicated, I just think I starter up the wrong way 😉

[Leo]

Yup you should be able to position the secondary navigation where the current custom element is.

[Carsten]

Hi there, I have now created a secondary navigation, but why does it appear both as ordinary inline menu and mobile menu on mobile?

I have been going through all settings without finding the solution to this. Furthermore, there are no breakpoint settings for the secondary menu, so I can’t see, how I can control this?

Just to clarify, then I wan’t to keep the mobile primary menu on desktop, but the secondary menu should remain a normal menu both on desktop and mobile.

How do I turn of the extra mobil menu in secondary?

View post on imgur.com

Thanks

mobile

View post on imgur.com

desktop

View post on imgur.com

[Leo]

Weird. It definitely shouldn’t show like on mobile by default.

Are you adding this PHP function?
https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

If so make sure to add the CSS as well.

[Carsten]

Hi there, no the function is not added in my functions.php

I have discovered a strange behavior of the secondary nav.

If I deactivate all my custom css, only the mobile secondary menu is displayed in mobile

CSS active

View post on imgur.com

CSS deactivated

View post on imgur.com

On desktop it is working as it should.

[Carsten]

Okay, I found this CSS which is about secondary navigation.

If I remove this, the mobile menu remains, and the normal secondary menu disappears, as described above. I makes no sense.

@media (min-width:769px) {
    .secondary-navigation .main-nav ul li.nav-button a {
        background-color: #ffffff;
        border: 2px solid #000000;
        color: #000000;
        line-height: 35px; /*this number will likely need to be adjusted*/
    }
}

@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;
    }
}

[Leo]

Can you remove your previous CSS for the secondary navigation and use the PHP snippet and CSS suggested in this article only?
https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

[Carsten]

Hi there, adding the function was enough to remove the mobile menu.

Should I then just leave out the CSS?

Now the issue is solved, but why is it necessary at all, to add extra code just to avoid a double menu?

Thanks

[Leo]

The function and CSS on the doc page make it that the secondary navigation doesn’t collapse into the toggle.

Glad it’s all working 🙂

[Author]

Posts