I want to put login button on navbar, but as soon as I put it on navbar the size of navbar increases. how do I prevent the navbar changing the size and change the size of button?
<div class="navbar-primary">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li>login</li>
</ul>
Here I want to replace the word login with a bootstrap button, I've tried putting <button class="btn btn-primary" type="submit">Sign in</button>
inside but navbar size changes because of the size of button
Edit:
register
login
Ok here is a simple solution just add this selector and styles
.btn-sm {
padding-top: 0px;
padding-bottom: 0px;
}
Here is a link to a codepen with the exact code except with the styles that I provided
Example
You can add and remove the styles to see the difference.
And in case you want the navbar to be a little bit bigger just add to the padding-top and padding-bottom accordingly.
Related
I have a simple nabber with page-scroll. It works in the desktop but when I view it in the mobile web app, it doesn't even display the menu or the toggle navigation. I am sure I am missing something with respect to mobile view but not sure. I checked couple of posts from stack overflow but didn't help. Please refer the navbar code snippet below
<nav class="navbar navbar-default navbar-fixed-top"
style="background-color: #757470; padding-left: 0px; margin: 0px; height: 64px;">
<div class="container" id="menu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
</button>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1"
style="font-family: Lato; font-size: 12px;" class="gatewayNav">
<ul class="nav navbar-nav"
style="padding-top: 0px; padding-left: 0px;">
<li><div style="" class="gatewayLogo"></div>
<h1 style="padding-left: 200px;"></h1></li>
<li class="dropdown"><a data-toggle="tab" href="#home"
id="homeMenu" prevent-default="" scroll-to="home"
style="border: medium none; padding-top: 10px; padding-bottom: 0px;"><b
style="color: white; font-size: 13px;">HOME</b><br> </a></li>
<li class="dropdown"><a data-toggle="tab" href="#startups"
prevent-default="" scroll-to="startups"
style="border: medium none; padding-top: 10px; padding-bottom: 0px; color: white;"
id="startupMenu"><b style="color: white; font-size: 13px;">STARTUPS</b>
<br> </a></li>
</ul>
</div>
</div>
First make sure that you are loading jquery first and then bootstrap's javascript after that. If you have these loaded correctly then your problem may be a couple of different issues. One being that if you are not seeing the toggle button you may have some custom css for your toggle button making it have no border or something to that effect. And without the <span class="icon-bar"></span> elements in the button you may not be seeing the toggle button. Next thing I see is you have a height set for the navbar. If you are seeing the toggle button and after clicking on it you don't see the dropdown because you have a white page. You may want to consider adding padding to get your desired height instead of giving it a height.
Here is a fiddle with your navbar working. I added a top and bottom padding of 7px because bootstrap 3's navbars are 50px so to get to 64px you can just add 7 to the top and bottom. Then I added the icon bars to the toggle button so you can see it. Like I said though make sure you loaded jquery first then bootstraps js file after as well. Here is the fiddle demo JsFiddle Navbar Fix
PS if you are not going to have a dropdown menu for each of your <li> elements in your navbar then there is no reason to add the dropdown class to the <li>. Also are you going to be toggling a tab or scrolling to a section when you click on your links and all of the page breaks and strange paddings may be causing some issues. Please leave a comment after this answer so I can understand what you are trying to achieve with all of this because it looks like you have a lot of conflicting issues with this entire markup and I am just trying to understand what you are trying to do so maybe I can help.
I'm trying to do a simple thing: a top bar (like a fixed navbar) that has a brand name on the left and 2 icons on the right. I'm developping for mobile, so I don't want it to change (collapse, like a navbar does by default) for small screens.
I'm relatively new to Bootstrap, so I guess I'm doing something wrong.
In order to prevent the collapse, I put everything in the navbar-header div. I created a <span class="pull-right"> to get the icons to the right, but I can't get them to render correctly.
(I doubt if this matters, but I'm using Bootstrap 3.0.x.)
This is what I currently have: http://jsfiddle.net/rd73tecL/2/
Try using the following CSS to disable the collapsing effect (as referenced here: Bootstrap 3 - disable navbar collapse):
.navbar-collapse.collapse {
display: block !important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right !important;
}
I'm unsure as to what you mean by 2 icons on the right: to the immediate right of the logo or right of the navbar? If the latter case, you could put your nav bar links into a div and add the pull-right class to put it to the right of the navbar. You would then also need to add display: inline-block !important; to the css of your navbar logo, as shown in this JSfiddle
Hope that helps.
Try using this code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Fibe</a>
<span class="navbar-right pull-right">
<ul class="navbar-nav nav">
<li class="navbar-link"><span class="glyphicon glyphicon-search"></span></li>
<li class="navbar-link"><span class="glyphicon glyphicon-star"></span></li>
</ul>
</span>
</div>
</div>
</nav>
Just amended
<span class="navbar-right"> with <span class="navbar-right pull-right">
Hope this helps.
I am using Bootstrap to build a site and am running into issues with the navbar. The navbar normally has the "brand" link and a search box, but when the navbar collapses I want it to be just the search box instead of just the brand link.
Here's the navbar uncollapsed:
navbar-sm
...and here's the navbar collapsed:
navbar-xs
and here's the code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand hidden-xs">FU</a>
</div>
<div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label class="sr-only" for="navbarSearchField">Search</label>
<input type="search" class="form-control" placeholder="Search" id="navbarSearchField">
</div>
</form>
</div>
</div>
</nav>
Any way I can get rid of the extra padding and lines above and below the search box? It shows up whether the search box is in the menu or on its own. As this is on an extra-small screen, I don't want to waste screen space if at all possible. :)
To remove the padding you can just override some CSS values of the .navbar-form. Use the appropriate media query so the changes only affect the xs screen size:
#media(max-width:768px) {
.navbar-form {
padding-top: 0;
padding-bottom: 0;
border: 0;
}
.navbar-form .form-group {
margin-bottom: 0;
}
}
See this demo fiddle.
Tip: When customizing Bootstrap CSS or any other framework it is useful to use your browser's inspection tools to figure out what CSS rules you need to modify.
Bootstrap newbie here. I've only today started using Bootstrap to develop a website with, but something's going on that I can't figure out. I am using the following code to create my navigation:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav uppercase bold">
<li>Projecten</li>
<li>Over</li>
<li>Contact</li>
</ul>
<a class="navbar-brand pull-right" rel="home" href="#"><img src="images/97x30.png" style="margin-top:-4px;"></a>
</div>
</div>
The idea is that there's a set of links aligned to the left, and a logo is displayed aligned to the right. Now I have noticed that this works fine as long as the browser window size is larger than 768px (where the bootstrap css still assigns a width to .container) but when the window becomes smaller (and the .container class no longer has a width, I believe), the links on aligned to the left of the navbar start stacking vertically, instead of horizontally.
The uppercase and bold classes in the ul are included in my custom css, to style the links.
If I were to guess, it has something to do with the "block" alignment or perhaps the .container becoming too small to fit the links horizontally, but I am unable to figure this out, and could not find a similar problem on the web.
I figure this is probably something very simple and makes me look stupid, but I hope you can help. Thank you.
You can add CSS like this to prevent it from stacking..
.navbar-nav {
min-width:360px;
float: left;
margin: 0;
}
.navbar-nav>li {
float: left;
}
http://www.bootply.com/114462
I'm using Bootstrap navbar with the bootstrap.min.css file.
This navbar stretches to the entire screen, where in the CSS file do I change the navbar settings (I don't want it to stretch)? There are a lot of navbar classes there and I can't seem to locate the right one.
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Imperia Bank
<button class="navbar-toggle" data-toggle="collapse"
data-target=".navHeaderCollapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Login</li>
<li>Register</li>
<li>Clients</li>
<li>Administrator</li>
<li>Accounts</li>
<li>Illustration</li>
<li >Atm</li>
</ul>
</div>
</div>
</div>
Place <div class="container"> above <div class="navbar navbar-inverse navbar-static-top">.
For anyone trying to make the navbar a custom width in Bootstrap 4, just override the navbar css width.
For example:
.navbar {
width: 400px;
}
In case you have more than 1 navbars (?!) just specify a custom class/id for the one you want to alter.
You should be able add your own styles on top of the existing styles. Using a tool like the chrome debugger you should b able to find the style rule that is doing this and then in your own stylesheet just use a more specific CSS selector to override it.
You can place the navbar in its own container (with applicable ID) and adjust the width of the container in your stylesheets. As Swagata said, you should be able to just flip the div tags and adjust your css accordingly. I'd give it a memorable name, though, for the sake of editing.
There is no pretty way to do this, considering .navbar was built to span the screen. But it can be accomplished fairly easily using the built in grid.
<div id='row'>
<div id='col-md-6'>
INSERT NAVBAR HERE
</div>
<div id='col-md-6'>
INSERT WHATEVER YOU WANT ON THE OTHER HALF OF THE SCREEN HERE
</div>
</div>