[Resolved] Sidebar title when using secondary navigation in sidebar

[Andrew]

I’ve added the secondary menu to the sidebar but it’s not showing the title. It does on mobile but not desktop.

I’ve tried adding the title separately as a widget or hook but even using the before_left_sidebar_content hook it appears after it.

Thanks.

[Ying]

Hi Andrew,

Try add this CSS:

.inside-left-sidebar button.menu-toggle.secondary-menu-toggle {
    display: block;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Andrew]

Thanks! That works but it also includes the menu link on desktop and it goes a bit odd if you click the link. Is there a way to make it not be a link on desktop?

And is there a way to have the menu be expanded by default?

[Ying]

Try this:

@media (min-width: 769px) {
    .inside-left-sidebar button.menu-toggle.secondary-menu-toggle {
    pointer-events: none;
    }
}

[Andrew]

Amazing, thanks, that worked.

And is there a way to have the menu all expanded by default?

[Ying]

Try add this CSS as well:

@media (max-width: 768px) {
.inside-left-sidebar .secondary-navigation .main-nav>ul {
    display: block;
}

.secondary-navigation .inside-navigation > * {
    width: 100%;
}
}

Let me know 🙂

[Andrew]

Unfortunately that hasn’t worked. The menu items all start closed whereas I’m after the menu items to all be expanded by default, if that makes sense?

[Elvin]

Hi Andrew,

Are you trying to make the submenu items expanded as well? Like this? https://share.getcloudapp.com/xQujxm0W

If that’s the case, try this CSS:

@media (max-width:768px){
    .dropdown-click #secondary-navigation.secondary-navigation ul ul {
        visibility: visible;
    }

    #secondary-navigation.secondary-navigation ul ul {
        position: relative;
        left: initial;
        opacity: 1;
        pointer-events: initial;
        height: auto;
    }

    #secondary-navigation .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
}

[Andrew]

That’s the one! Sorry my description was so bad 😂

All sorted now – Thanks both.

[Elvin]

No problem. Glad you got it sorted. 😀

[Andrew]

Slight issue with this if you could take a look that would be much appreciated.

The first thing is the pointer events works for mobile but not for iPad/tablet. How can I disable the pointer events for tablet without affecting desktop?

The other thing is the sidebar goes above the sticky header. I’ve tried playing with the z-index of the sidebar but am not having much luck?

Thanks.

[David]

Hi there,

in Elvins CSS change this line:

@media (max-width:768px) {

to:

@media (max-width:1024px) and (pointer: coarse) {

This should cover any touch enabled devices up to 1024px in size.

[Andrew]

That’s done the trick – Thanks!

Any luck with the sidebar going above the sticky header?

[David]

Try this CSS:

#mobile-header {
    z-index: 1000000 !important;
}

[Andrew]

Unfortunately doesn’t seem to do anything!

[Author]

Posts