How to Make navigation in sidebar show as dropdown on mobile?

Hi Bas,

the sidebar menu has the same content as the Secondary Navigation. Will you be keeping both of them?

Hi David,

No I will create multiple menus. For each subject on the site a new one.

OK, tricky one as GP only supports two navigations. Without coding our own drop down for the sidebar or using a plugin how about this:

Replace Secondary navigation with a Top Bar Widget Menu. We can add a little CSS to make it horizontal.
Now use the Secondary navigation for the Sidebar Menu. This will be automatically responsive.
Then for the Mobile, we hide the Top Bar (some CSS). And use the Slide Out Navigation that contains the primary and top bar menus.

Any good?

Sounds good! But how do I place the secondary navigation in a sidebar or more important in a widget? I use a pagebuilder and disabled the sidebars.

OK, Customiser > Layout > Secondary Navigation > Location: Left Sidebar.

To hide Top Bar on Mobile this CSS:

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

For the Slideout Navigation, set it to Mobile only and assign a menu that combines both the Primary and Top bar menu items.

Sorry I changed my last comment. I use a pagebuilder and not using the sidebars. Is there an other way?

Right, i am not familiar with Site Origin pagebuilder. Do they have a navigation widget?

I can use the basic navigation widget from Wordpress within SiteOrigin.

I have had a look around to see if there is a plugin or site origin add-on that could do this. Unfortunately, i haven't been successful. This looks like it will require some custom coding. I am seeing if there is something simple that can do this function.

Question, when you add the site original menu widget can you give that widget an ID# ?

Yes I can add ID and Class. I was also looking for a way to add some css to create a dropdown on mobile. The problem is that you need to add a select-function to unfold the dropdown.

Hi Bas, sorry for the delay, we can try a little bit of code if you're up for it?
Lets see if we can get a simple toggle button in play, and then we'll figure out the rest.

First off a piece of Javascript to be added to the GP Hooks > wp_footer (make sure you save hooks):

<script>
document.getElementById('mobile-toggle').onclick = function(){
  document.getElementsByClassName('my-widget-class')[0].classList.toggle("open");
}
</script>

The my-widget-class which you can name whatever needs to be added to the menu widget.

Now above the menu widget we need a custom HTML widget with this to create our basic button:

<a id="mobile-toggle"> MENU</a>

And lastly this CSS:

#mobile-toggle:before {
	content: "\f0c9";
    font-family: GeneratePress;
}

.my-widget-class:not(.open) {
	height: 0;
	overflow: hidden;
}

.my-widget-class.open{
  height: auto;
}

It works! The rest is just styling.
Thanks for your great support!

Great to hear that!