Newbe Dev Stack

Answer : Your JavaScript replaces the inner html of the #ChangeToggle element to show either the X or the hamburger icon. Precisely clicking on the X or the hamburger menu instead of the #ChangeToggle will remove the element being clicked on which I think prevents it from bubbling up. As Bootstrap's collapse plugin uses an event handler on the document to determine if an element has been clicked, the collapse plugin will never get notified. I've created a small example where a click handler on the pink .outer area replaces the green .inner area. Note that clicking on the pink area (your #ChangeToggle ) will lead to two events, where clicking on the green area (your X icon) will lead to a single event. $(function() { $('.outer') .click(function() { $('.outer').html('<div class="inner"></div>'); fired('.js-outer'); }); $(document).on('click', '.outer', function() { fire...

Answer : The sticky-top is working, but it doesn't appear to be working for two reasons... There isn't enough content in the main content area to scroll It's positioned at top:0 so it hides behind the fixed navbar Add CSS to offset the top of the sidebar (the same as height of fixed navbar). .sticky-offset { top: 56px; } <ul class="list-group sticky-top sticky-offset">..(sidebar)..</div> And, then add enough content (or height) in the main area so that scrolling is necessary... Working Demo: https://www.codeply.com/go/7XYosZ7VH5 <nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top"> .. </nav> <div class="row"> <div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block"> <ul class="list-group sticky-top sticky-offset"> <li>Menu item..</li> <li>Menu item..<...

Answer : Bootstrap 4 has many different ways to align navbar items. float-right won't work because the navbar is now flexbox . You can use mr-auto for auto right margin on the 1st (left) navbar-nav . Alternatively , ml-auto could be used on the 2nd (right) navbar-nav , or if you just have a single navbar-nav . <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <sp...

Answer : I think this is what you are looking for. You need to remove the float: left from the inner nav to center it and make it a inline-block. .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } http://jsfiddle.net/bdd9U/2/ Edit: if you only want this effect to happen when the nav isn't collapsed surround it in the appropriate media query. @media (min-width: 768px) { .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } } http://jsfiddle.net/bdd9U/3/ The original post was asking how to center the collapsed navbar. To center elements on the normal navbar, try this: .navbar-nav { float:none; margin:0 auto; display: block; text-align: center; } .navbar-nav > li { display: inline-block; float:none; } There's another way to d...

Answer : Updated for Bootstrap 4.1+ Bootstrap 4 the navbar now uses flexbox so the Website Name can be centered using mx-auto . The left and right side menus don't require floats. <nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav"> <div class="container"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Download</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Register</a> </li> </ul> <ul class="nav navbar-nav mx-auto"> <li class="nav-it...

Answer : There are multiple issues... The selector $('.nav li') does nothing because you have no .nav class used anywhere in the markup. It should be $('.navbar-nav .nav-link'). You have style="color:white" on the links which will override any changes you make with the active class. You have no CSS for the active class, and by default Bootstrap active class on navbar-dark is going to be white. What color are you trying to set? Set active in the nav-link instead of the li, .navbar-dark .nav-item > .nav-link.active { color:white; } $('.navbar-nav .nav-link').click(function(){ $('.navbar-nav .nav-link').removeClass('active'); $(this).addClass('active'); }) Demo: https://www.codeply.com/go/I3EjDb74My