WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Bootstrap Vertical Menu in sidebar stacking order problem (6 posts)

  1. Tasha
    Member
    Posted 12 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>
  2. Tasha
    Member
    Posted 12 months ago #

    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

  3. Tasha
    Member
    Posted 12 months ago #

    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.]

  4. Tasha
    Member
    Posted 12 months ago #

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

  5. Tasha
    Member
    Posted 11 months ago #

    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.

  6. Tasha
    Member
    Posted 11 months ago #

    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"));
    }
    };

Reply

You must log in to post.

About this Topic