Sidebar title when using secondary navigation in sidebar

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 :)

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?

Try this:

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

Amazing, thanks, that worked.

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

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 :)

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?

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

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

All sorted now - Thanks both.

No problem. Glad you got it sorted. :D

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.

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.

That's done the trick - Thanks!

Any luck with the sidebar going above the sticky header?

Try this CSS:

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

Unfortunately doesn't seem to do anything!