This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Display left sidebar vertical menu on top, on mobile

  • Creator
    Topic
  • #21098
    vnp
    Participant

    Two related questions

    – How can I display left sidebar on top on mobile?
    Using Jumpstart & Dark child template, it is positioned at the bottom on mobile now.
    What I am trying to achieve is a vertical menu left (just as dev.themeblvd).

    – How can I make this vertical menu in left sidebar the main nav have the collapsable menu on mobile.

    I unhooked header & header menu and I pointed a custom menu widget (main nav) to the left column.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #21106
    Jason Bobich
    Keymaster

    Hi,

    How can I display left sidebar on top on mobile?

    You’d just override the CSS that places the sidebar below. Note that this will no longer work though in Jump Start 2+.

    @media (max-width: 768px) {
    	#sidebar_layout .fixed-sidebar {
    		position: static;
    	}
    }

    How can I make this vertical menu in left sidebar the main nav have the collapsable menu on mobile.

    You just need to insert a button that targets the menu in your sidebar. Here’s how I did it in the other child theme used on the dev site:

    function my_responsive_nav(){
    	echo '<div class="btn-navbar-container"><a href="#id-of-nav-container" class="btn-navbar"><i class="fa fa-bars"></i></a></div>';
    }
    add_action( 'themeblvd_fixed_sidebar_before', 'my_responsive_nav' );

    You’d replace “id-of-nav-container” with the ID of the HTML element you want to toggle to show/hide. For example in my dev site it’s the outputted custom menu widget with ID “nav_menu-2”.

    #21107
    vnp
    Participant

    Thanks a lot.

    I managed to get the responsive menu working. Kind of. The normal menu is showing (I happened to have the same nag_menu-2 ID) AS WELL AS the icon. Once I push the icon, the menu disappears.

    AND, the left sidebar is still positioned at the bottom of the content on mobile, in stead of top.
    The CSS override does not seem to make a difference.

    #21111
    Jason Bobich
    Keymaster

    You got a live link?

    #21112
    vnp
    Participant
    #21115
    Jason Bobich
    Keymaster

    I think this is actually the piece:

    @media (max-width: 768px) {
    	#sidebar_layout .sidebar_layout-inner > .row {
    		display: block;
    	}
    }

    And for the menu, just hide it with display:none from your CSS.

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