WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Bootstrap Vertical Menu in sidebar stacking order problem

[Resolved] Bootstrap Vertical Menu in sidebar stacking order problem

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

    http://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

    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.

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

    Thank you very much
    Tash

    [Moderator Note: No bumping, thank you.]

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

    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.

    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 ‘[Resolved] Bootstrap Vertical Menu in sidebar stacking order problem’ is closed to new replies.
Skip to toolbar