I am using boot strap for my design.I have used nav bar for drop down purpose.when i try to iclude Logo,Signin/signup above this menu its not getting properly aligned.So when i used another nav bar it is getting alligned but lot of empty space between the two.
link
Here is the code:
<
nav class="navbar navbar-static">
<div class="navbar-header"> <img class="img-responsive col-md-4" src="final1.jpg">
<div > </div>
<div class="pull-right"> Sign In </div>
<div class="pull-right col-md-1"> Sign Up </div>
</div>
</nav>
<nav class="navbar navbar-default navbar-static">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large"> </li>
</ul>
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="http://rewardsinn.com/home2.php">Home</a> </div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large"> Categories<b class="caret"></b>
<form class="navbar-form navbar-left" method="post" action="search.php">
<div class="form-group">
<input name="search" type="text" class="form-control" placeholder="Search for Store">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
body element on the site has margin-top: 50px and also padding-top: 50px remove it and you shall be fine.
But it's hard to say which file to edit since your styles' structure is completely messed up. Editing bootstrap.css wont help since there are other files that control looks of the body element. Like this misterious home2.php:605 in the Dev Tools which leads to some JS code.
And by the way, StackOverFlow is not the site where people are solving your code problems for free while you are paid for that. It is not about it at all. You are missing the point of the resource, just saying.
I am not sure what are you asking but if is for the space between the two navbar you can remove it by adding margin-button:0 to the navbar statics like this
in your css
.navbar.navbar-static {
margin-button:0
}
If you wanna remove the top space
body {
padding-top:0;
margin-top:0;
}
The navbar in bootstrap has a default margin-bottom of 20px. You need to change that to 0.
Give your top navbar with the logo a class
<nav class="navbar navbar-static no-margin">
....
</nav>
In your stylesheet
.no-margin{
margin-bottom: 0;
}
Hope this helps.
Related
I have a problem with my bootstrap navbar, when it's full screen a small icon-bar appear on top, and when resizing the window the same icon-bar remain there and the button doesn't appear, first here's the code:
<header>
<nav role="navigation" class="navbar navbar-inverse" style="border-radius:0px;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Movies List</li>
<li>Genre List</li>
</ul>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
</header>
And here's a screenshot of what it looks like:
Looks like you may be missing the javascript component include:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Its the issue from your Javascript with CSS, Button is always reflecting which means your Nav Bar is not converting as Button when image is enlarged
You can use this its easy and convenient Boot Flat
I'm trying to make my navbar semitransparent on this code but I'm not able to do it:
<nav class="navbar navbar-default navbar-fixed-top transparent" >
<div class="container">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Searches</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Legal <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Terms</li>
<li>DMCA</li>
<li>RTA</li>
<li class="divider"></li>
<li>Contact</li>
Try this in your code, it worked for me -
give an id to the nav
like this-
<nav class="navbar navbar-default navbar-fixed-top transparent" id="nav1">
Then apply this in your css-
#nav1
{
background-color:#F00; /*whichever you want*/
opacity: 0.5;
filter:(opacity=50);
}
in your bootstrap.css find the navbar you are using, for example, if you're using the default navbar search for .navbar-default or .navbar-inverted as per your case and set the opacity simply using the CSS opacity command.
Did the job for me.
It would be nice to see the orginal CSS.
Paste the css code that shows the opacity.
The way I see your problem I think you did not write the path correct enough so it doesn't overwrite the original css from bootstrap.
<div id="wrapper">
<div class="container">
<div class="nav">
<p>tessssssssssssssst</p>
<div>
</div>
</div>
#wrapper .container .nav{
background-color: red;
opacity: 0.3;
}
#wrapper .nav {
opacity: 1.0;
}
http://jsfiddle.net/7h4hrvhu/
I'm trying to create a webpage using bootstrap3 but have run into a problem in the navigation bar. I want the navigation links (there are 4 - "Web Design" "Development" "Photography" "Blog") to equally divide the space available in the horizontal navbar. At the min they are just piling up on the left. Here is a segment of the code - hopefully I haven't missed out an important bit. I have NOT amended the bootstrap CSS at all.
<div class="container-fluid">
<div class="row">
<!-- Navbar -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active col-md-3">
Web Design
</li>
<li class="col-md-3">
Development
</li>
<li class="col-md-3">
Photography
</li>
<li class="col-md-3">
Blog
</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<h1>Hello World!</h1>
</div>
</div>
</div>
</div>
I forced a few changes in the bootstrap layout with a couple of css rules, see if this doesn't float your boat :)
http://jsbin.com/xeniwonujeti/1/
my css changes:
.nav { width: 100%;}
.nav li { width: 25%; text-align: center; }
Obviously this will limit dynamic menu changes and you'll have to change it if the amount of links changes.
I have markup defined in the page as below:
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-pills">
<li class="active">Home
</li>
<li>Companies
</li>
<li>Help
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-4">
<ul class="breadcrumb">
<li>Home
</li>
<li>About
</li>
<li class="active">Help
</li>
</ul>
</div>
</div>
When the page renders the breadcrumb hides behind the navbar. Any bootstrap way of fixing it? Or is this a bug?
Ps: jsFiddle : http://jsfiddle.net/KNsYt/2/
It is clearly defined in bootstrap documents itself as below:
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
So, give 50 or more pixels of padding to the body to solve the issue. check this fiddle.
Make sure to include this after the core Bootstrap CSS.
body {
padding-top:60px
}
I'm using a nav-bar from Bootstrap (http://twitter.github.io/bootstrap/components.html#navbar) apart from the links for different tabs which are on the left side of this nav-bar, I want to put my notification icons on the very right of it. How can I do this with CSS? I dont want to use pixels, I rather have it flexible with the size of window and go to the right of this nav-bar.
thanks
Just use two different UL like on the following code :
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav">
<li>THREE</li>
<li>LEFT</li>
<li>ITEMS</li>
</ul>
<ul class="nav pull-right">
<li>RIGHT</li>
<li>ITEMS</li>
</ul>
</div>
</div>
</div>
</div>
Link to a bootply : http://bootply.com/69056