For Bootstrap 3 this is how I did this based on the default Navbar structure: .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #FFFF00; color: #FFC0CB; }
For Bootstrap version 3.2 and up you should also set the display:table; for the input-group and set the width to 1% for the input-group-addon. <div style=”display:table;” class=”input-group”> <span style=”width: 1%;” class=”input-group-addon”><span class=”glyphicon glyphicon-search”></span></span> <input type=”text” autofocus=”autofocus” autocomplete=”off” placeholder=”Search Here” name=”search” style=”” class=”form-control”> </div> Demo Bootstrap version 3.2+: http://www.bootply.com/t7O3HSGlbc — If you allow changing the position … Read more
You can overwrite the bootstrap colors, including the .navbar-inner class, by targetting it in your own stylesheet as opposed to modifying the bootstrap.css stylesheet, like so: .navbar-inner { background-color: #2c2c2c; /* fallback color, place your own */ /* Gradients for modern browsers, replace as you see fit */ background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, … Read more
I was having a similar problem, and I believe I found an improved solution. Don’t bother specifying data-offset-top in your HTML. Instead, specify it when you call .affix(): $(‘#nav’).affix({ offset: { top: $(‘#nav’).offset().top } }); The advantage here is that you can change the layout of your site without needing to update the data-offset-top attribute. … Read more
You can set backGround image to navigationBar Using this Put in didFinishLaunchingWithOptions [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@”title_bar.png”] forBarMetrics:UIBarMetricsDefault]; Or you can set navigation bar image in any view using UINavigationBar *navBar = [[self navigationController] navigationBar]; UIImage *image = [UIImage imageNamed:@”TopBar.png”]; [navBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault]; Or you can set a view on your NavigationBar Link [[UINavigationBar appearance] addSubview:yourView]; … Read more
The Bootstrap 4 Navbar uses flexbox, so it’s possible to achieve this without extra CSS. You will need an empty spacer div to keep the logo centered. <nav class=”navbar navbar-expand-lg navbar-light bg-light”> <div class=”collapse navbar-collapse w-100 order-1 order-lg-0″ id=”navbarNav”> <ul class=”navbar-nav”> <li class=”nav-item active”> <a class=”nav-link” href=”#”>Home</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>Features</a> </li> <li … Read more
Bootstrap 5 (update 2023) As stated in the docs, For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class. Bootstrap 4 (update 2018) Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes: <nav class=”navbar fixed-top navbar-expand-sm”>..</nav> navbar-expand-sm = mobile … Read more
The simplest way is using the flexbox utility classes, so no extra CSS is needed. Keep the items you always want to show out of the navbar-collapse div. https://www.codeply.com/go/TWZGiy3VGw <nav class=”navbar fixed-top navbar-light navbar-expand-lg navbar-template”> <a class=”navbar-brand” href=”#”>Navbar</a> <div class=”d-flex flex-row order-2 order-lg-3″> <ul class=”navbar-nav flex-row”> <li class=”nav-item”><a class=”nav-link px-2″ href=”#”><span class=”fa fa-facebook”></span></a></li> <li class=”nav-item”><a … Read more
Updated 2022 The Bootstrap 5 Navbar also requires navbar-light or navbar-dark to make the hamburger display. Original Answer It’s there but you’re not seeing because there is no background-color.. Use the navbar-default navbar-light or navbar-dark class: <nav id=”navbar-primary” class=”navbar navbar-light bg-light” role=”navigation”> or, add a background color: #navbar-primary .navbar-nav { background: #ededed; } or, darken … Read more
TL;DR: Create another <ul class=”navbar-nav ml-auto”> for the navbar items you want on the right. ml-auto will pull your navbar-nav to the right where mr-auto will pull it to the left. Tested against Bootstrap v4.5.2 <!DOCTYPE html> <html lang=”en”> <head> <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”/> <style> /* Stackoverflow preview fix, please ignore */ .navbar-nav { flex-direction: row; … Read more