<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
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 am using bootstrap to make menu upper-right.
For desktop there are four menu shown on the upper-right correctly
If I make browser narrower for mobile environment.
The icon with there line appears, but even I click it, nothing happens.
These are my source code , is there any point???
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="/whitebear/web/app_dev.php/" class="navbar-brand">
<img height="30px;" src="/whitebear/web/bundles/acmetop/img/whitebearLogo.png"></a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar-main" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Nice</li>
<li>Q & A</li>
<li>login</li>
<li><a href="/whitebear/web/app_dev.php/register/" >register</a></li>
</ul>
</div>
</div>
</div>
Add a div to wrap the menu list with id of data-target attribute value(#navbar-main)
<div id="navbar-main" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
// li list
</ul>
I have spent already several hours trying to correctly position several elements in a fixed bootstrap navbar, but I do not manage to have exactly what I would like. This is what I have so far:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="http://www.aprentiko.com">brand</a>
<p class="navbar-text">title of the page</p>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav navbar-right">
<li></span></li>
<li><span class="glyphicon glyphicon-cog"></span></li>
<li></span></li>
</ul>
</div>
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<ul class="nav navbar-nav">
<li><span id="audioInPause" class="glyphicon glyphicon-play"></span></li>
</ul>
</div>
</div>
</nav>
The problems I have are the following:
I would like to position the "title of the page" element in the middle of the screen, but it always stays in the left, next to the brand.
The audioControl item should be independent of the other icons in the right side (i.e. it should not collapse when the viewport becomes too small. I achieved the "not collapsing" part, but when the icons collapse I get a) the play button always goes in a second row, b) clicking on the collapsed button activates the play button, instead of opening the menu to select one of the collapsed items.
I created a jsfiddle at https://jsfiddle.net/cwx1wvo7
I can answer the first one quickly, but I don't know if it will work with collapse, you can play around.
I agree with the comment above about by MattD. As a twist, partition your nav using col-lg-xx col-md-xx etc then use text-center
As an example to give you and idea,
<div class="navbar-header pull-left col-lg-10 col-md-9">
<a class="navbar-brand" href="http://www.aprentiko.com">brand
<p class="text-center navbar-text">title of the page</p>
</a>
</div>
<div class="collapse navbar-collapse navbar-right col-lg-2 col-md-3">
in fact, u should take a look at the bootstap.css to have an idea of the classes used to code elements.
the ms-md-auto move ur elements to the right:
.ms-md-auto {
margin-left: auto !important;
}
<ul class="navbar-nav ms-md-auto mb-2 mb-lg-0" >
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
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
}