[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 5 days, 23 hours ago.

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

    Bas

    Hi,

    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.

    Bas

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #599913

    David Customer Support

    Hi Bas,

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

    #599914

    Bas

    Hi David,

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

    #599926

    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?

    #599938

    Bas

    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.

    #599951

    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.

    #599955

    Bas

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

    #599964

    David Customer Support

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

    #599965

    Bas

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

    #600155

    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# ?

    #600180

    Bas

    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.

    #600623

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

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

    Bas

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

    #600683

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

You must be logged in to reply to this topic.