Memorial Day Sale! Get 15% off GP Premium with the discount code: MEMORIALDAY19

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

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

This topic contains 13 replies, has 2 voices, and was last updated by  David 11 months, 2 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #599805



    I have a sidebar widget with a extra navigation on subpages. If this page is watched on mobile I want the navigation transform in a responsive menu. Same style as the secondary navigation. I can’t seem to find a way to do this. Not on the web and not on this forum. Please help.

    Thanks in advance.


    GeneratePress 2.1.2
    GP Premium 1.6.2

    David Customer Support

    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.


    David Customer Support

    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.


    David Customer Support

    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?


    David Customer Support

    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.


    David Customer Support

    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.


    David Customer Support

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

    document.getElementById('mobile-toggle').onclick = function(){

    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;
      height: auto;


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


    David Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.