CODEWITHSUNDEEP
bootstrap-4menunavbar
John Theoden
John Theoden

Reputation: 325

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>

Upvotes: 0

Views: 870

Answers (1)

David Liang
David Liang

Reputation: 21526

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.

Upvotes: 1

Related Questions