navbar

How to set a picture programmatically in a NavBar?

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

Bootstrap navbar: nothing is displayed on smaller devices

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

Bootstrap 3 – How to maximize input width inside navbar

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

navbar color in Twitter Bootstrap

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

How to use the new affix plugin in twitter’s bootstrap 2.1.0?

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

Bootstrap 4 Navbar align logo center and toggle icon on the left

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 Navbar. When I press the button nothing happens

What is missing is a reference to jquery.js. I created jsfiddle to demonstrate it. Please note that you need to reference jquery.js before referecing bootstrap.js Your html head should look like: <!– Latest compiled and minified JavaScript –> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”> </script> Hope this works

Bootstrap 4 – Navbar items outside the collapse

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

Align nav-items to right side in bootstrap-4 [duplicate]

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