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

Home Forums Support [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?

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

    #599913
    David
    Staff
    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
    Staff
    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
    Staff
    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
    Staff
    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
    Staff
    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
    Staff
    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
    Staff
    Customer Support

    Great to hear that!

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.