Bootstrap Vertical Menu in sidebar stacking order problem

  • Resolved Tasha

    (@queenv)


    10 years, 9 months ago

    Hello All

    I’ve been struggling with this problem for a few days now trying various solutions found online but nothing is working. I am trying to create my first Bootstrap 3 site with WordPress. I am wanting to create a vertical menu which should be responsive. The only way I can think how is to put it in the sidebar? It works fine except of course if the window resize the menu is jumping to the bottom where I need it to go to the top. I’m working locally so I don’t have a link to post but I’m hoping someone could give me some advice please?

    This is the script that was suppose to work according to a tutorial:

    <script type="text/javascript">
(function($) {
    var $window = $(window),
        $html = $('#menu-bar');

    $window.resize(function resize() {
        if ($window.width() < 768) {
           return $html.removeClass('nav-stacked');
        }
        $html.addClass('nav-stacked');
    }).trigger('resize');
})(jQuery);
</script>

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Tasha

    (@queenv)

    I’ve come a little closer to a solution. It actually works fine with the below script. The menu display at the top of smaller screens as I want it, except when I resize the window back to full width the menu display as a full width menu pushing everything else on the page down. So it looks as if it doesn’t resize back to the sidebar – if that makes any sense. Could that be a CSS problem? I now also have a link that I can post – I haven’t done any styling, I’m still busy with the positioning:

    https://www.hlsmentors.angelicdesign.co.uk/

    <script type="text/javascript">
$(window).resize(function(){
if ($(window).width() <= 768){
$(document).ready(function() {
$('#sidebar-nav').insertAfter('#myJumbotron');
});
}
});
</script>

    Any help would be much appreciated.

    Thanks
    Tash

    Thread Starter Tasha

    (@queenv)

    Anyone that can help with this problem please? When resizing the window from smaller screens to full screens the vertical menu which (is in the side-bar) stretches over the full screen, pushing everything else on the page down.

    https://www.hlsmentors.angelicdesign.co.uk/

    Thank you very much
    Tash

    [Moderator Note: No bumping, thank you.]

    Thread Starter Tasha

    (@queenv)

    I installed Jetpack as suggested by Esmi but it didn’t change anything. Which features of Jetpack should I activate? Thanks

    Thread Starter Tasha

    (@queenv)

    Can someone please tell me if I’ve done anything to offend anyone or break the rules on this forum, I don’t seem to get any answers for quite a few questions I’ve asked now. I would really like to fix it if I’ve done something wrong please.

    Thread Starter Tasha

    (@queenv)

    For anybody that come accros this in future. The solution, obviously with your own id’s:

    $(function(){
    // initial size adjustments
    resizeMe();
    // Resized window!
    $(window).on(“resize”,function(){
    resizeMe();
    });
    });

    function resizeMe(){
    if ($(window).width() <= 768){
    $(‘#sidebar-nav’).insertAfter(‘#myJumbotron’);
    }else{
    $(“#sidebarBG”).prepend($(“#sidebar-nav”));
    }
    };

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Bootstrap Vertical Menu in sidebar stacking order problem’ is closed to new replies.