I want to make the whole header of a page fixed it will contain logo, nav and social links
when I add the fixed position rule it stacks behind the body sections and floats left out of the container please see this code and see if you can help:
http://www.bootply.com/tbfqTASyp5
You should definitely read, or re-read the bootstrap documentation as this is all built-in functionality: http://getbootstrap.com/components/#navbar.
That being said, here is the out-of-the-box code that gets you most of the way there:
<div class="navbar navbar-default navbar-fixed-top container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://placehold.it/60x35">
</a>
<a 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>
</a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Blog</li>
<li>About Me</li>
<li>Contact Me</li>
</ul>
</div>
And a bootply fixing your example: http://www.bootply.com/WLVUWn8xN0
Related
bootstrap 4 Navbar scrolling to fixed top Working But when Browser reloading time same times mouse scrolling Navbar fixed not working. why not working i'm not understand?
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Home"></a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Exam Notic</li>
<li>Student List</li>
<li>Contact Us </li>
</ul>
</div>
</div>
</div>
</nav>
I have a webpage which has a standard bootstrap header (with a logo and dropdown section) and a sidebar for navigation.
I'm trying to make the sidebar collapse when the screen size is small. For this, I've made a toggle button which collapses the menu just fine. But the problem is that it seems that even when the collapse-able menu is closed, some contents still show up on top of everything.
Here's a screenshot to show you what I mean.
The purple box shows that even when the menu is closed, its contents somehow show up on top of the other elements.
Is there a fix for this?
Here's the code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<span class="caret"></span>
<a class="navbar-brand pull-right" href="#">Company Logo</a>
</div>
<ul id="side" class="nav navbar-nav collapse visible-xs">
<li>Home</li>
<li>Stuff</li>
<li>List Example</li>
<li>Contacts</li>
<li class="dropdown">User <span class="caret"> </span>
<ul class="dropdown-menu">
<li>Profile</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
Try adding this to the navbar-header
<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>
and remove the visible-xs too from there.
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-brand"><img src="../images/logo.png" class="logo"></div>
<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>ABOUT</li>
<li>SOFTWARE & WEB DEVELOPMENT</li>
<li>GAME DEVELOPMENT</li>
<li>ARTS & DESIGNS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
Hi i need help with my bootstrap navbar, whenever I minimize or maximize my webpage, the navbar header i made keeps resizing. what code should i add and/or change in order to make the size consistent? P.S. my image wont resize as well, stuck in the same size and hides my carousel if the window size is small.
Fullscreen
Smaller
Create whit layoutit
get element f12 or save whit login
I'm trying to get an app to work nicely with a mobile browser, having got it working well on a normal desktop. I'm just starting out on the responsive layout stuff so am a bit of a newbie here.
I have the bootstrap nav-bar working down to 768px as shown here
but at 768px and below it does this
So, I'm obviously missing something in my css but have NO idea how to get the menu to stack as I thought it would automagically at the mobile browser sizes (isn't that what bootstrap is meant to do for me?).
The code being used to generate the menu is
<template name="header">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><i class="glyphicon glyphicon-home"></i></li>
</ul>
<ul class="nav navbar-nav">
<li>Make a request</li>
</ul>
<ul class="nav navbar-nav">
<li>Packing</li>
</ul>
<ul class="nav navbar-nav">
<li>Admin</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{{>loginButtons}}
</ul>
</div>
</div>
</template>
Thanks guys, my lack of understanding is glaring I assume.
Peter.
You need to include the following in your navbar markup;
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
See the documentation on the navbar here
Bootstrap will do what you are expecting it to, given you use the right tags and classes. For the navbar, you've missed <div class="navbar-header"> which holds the toggle-button to show/hide the menu on smaller viewports. The code looks like:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
The navbar1 is the id from your .navbar-collapse div.
<div class="navbar-collapse collapse" id="navbar1">
You can also add an anchor tag within the div for adding any logo or brand name:
<a class="navbar-brand" href="#">Logo/Company name here</a>
DEMO (Click on the mobile icon to see it in mobile view)
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
}