Search code examples
bootstrap-4menunavbar

Bootstrap 4 collapse jump menu


I have a problem with Bootstrap 4 menu. Every time I click on "hamburger" icon, it collapses my menu, but during the transition, it jumps up and then loads just fine. You can see that in my example:

JSFiddle

<nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed">
    <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="img/logo_1.png"></a>

Solution

  • Because you have set a fixed height on your navbar:

    .navbar {
        padding: 0;
        height: 40px;
        background-color: rgba(242, 243, 244, .9) !important;
    }
    

    When you click on the "hamburger" icon to expand the menu, the menu is actually overflowed. Removing the fixed height will get rid of the jumping issue.

    I am not sure if I understand what you're trying to structure by just looking at your HTML so I can't show you a demo, but it looks like you have many bs3 codes carried over, i.e., navbar-fixed. Try if you can clean up your HTML code a little bit.