On my website, I am using the navbar-fixed-top class as per bootstrap's docs. I want my nav to stay fixed but unfortunately the position becomes relative upon viewing the page source. Here is my code.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="navId">
<li class="nav-item">
Home
</li>
<li>
Work
</li>
</ul>
</div>
</nav>
I am quite confused on this. I believe I have followed this example properly. If someone knows my error here, let me know!
One more thing. I have NOT overriden any styles of bootstrap.
<nav class="navbar navbar-default navbar fixed-top">
Just remove "-" between navbar and fixed top
Related
I'm new to Bootstrap 3 and I'm still learning. Till now I managed to make an simple navbar with logos and links. I'm now trying to have my logo above and my navigationbar below the logo. I've used HTML breaks, but that only is spacing my bar downwords.
The code:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Super Signals</a>
</div>
<br>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Targets</li>
<li>Contact</li>
</ul>
</div>
</nav>
This is what I have now:
This is what I want:
Add float: initial; to the navbar-header class
You can accomplish this by using float: none or float: initial which will remove the left float that is currently in effect.
from what I can see here. It's a problem of telling the browser where you want to position.
1. Use CSS
https://www.w3schools.com/css/css_positioning.asp
2. Using quick positioning classes
position-static,
position-relative,
position-absolute,
position-fixed,
position-sticky,
3. Float
float: none, float: initial
Hope this answer helps.
Use this code and style your h1 tag as your requirement
<div class="container"><h1>Super Signals</h1></div>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Targets</li>
<li>Contact</li>
</ul>
</div>
</nav>
Any problem or question just ask in comment below my answer
Navbar items are sitting on top of each other when creating a <nav class="navbar navbar-default"> while they are meant to sit next to each other. I have followed the instructions on W3 Schools As far as I'm concerned my code is right.
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">BRAND</a>
</div>
<ul class="nav navbar-nav">
<li>about</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</div>
</nav>
</div>
Here is my Codepen
Pasting your example into bootply seems to work fine. I'd check that your script & stylesheet files are correctly included in your page.
--Edit--
I actually do see the issue after reducing the browser width match one of the smaller media queries (responsive mode). The code you're using is working correctly, but is based on an incomplete example which wouldn't collapse down to the hamburger/triple-bar icon, as Bootstrap navbar's typically do.
You might be better served to review the code example from the Bootstrap website directly: https://getbootstrap.com/docs/3.3/components/#navbar
Can somebody explain what is going on here?
I'm using bootstrap 3.3.7.
Why are .container elements invisible?
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Big Brother</a>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>something</li>
</ul>
</div>
</div>
<div class="container">
<h2>Invisible</h2>
</div>
Your <h2> is not invisible, it's hiding behind your navbar.
You're using a navbar that uses fixed positioning. This takes it out of the normal document flow where it doesn't take up space so the elements after it begin to flow as if it wasn't there.
If you add padding-top: 50px; to <body> you will see your <h2>.
If you read through the Bootstrap Navbar Docs you'll notice a callout that says Body padding required.
In Bootstrap 3 how do I get the navbar-right to work correctly on mobile? In my project for some reason when the browser shrinks down it puts my navbar-right item on the next line.
I've tried setting pull right on it, and setting pull-left on the brand image, but no luck.
I'm assuming there is something I'm doing wrong in Bootstrap or a class I need to add. Please help.
Here is what it looks like on mobile:
Here is what I want it to look like on mobile:
On desktop it works fine.
Here is my navbar html:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
</div>
<div class="navbar">
<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand" href="/apply/">Continue Application</a>
</ul>
</div>
</div>
</nav>
</header>
Please help.
Following Bootstrap 3 styling, your navbar element should show the mobile toggle button when in responsive resolution, like in this example.
If you want to have only those two elements of your interface in the same position inside a navbar element you could edit your html as follows:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
<a class="navbar-brand pull-right" href="/apply/">Continue Application</a>
</div>
</div>
</nav>
</header>
But I suggest you to implement a mobile toggle button with a collapsed menu to improve your users experience.
I'm new to Web Development, and i've written the following code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://in.linkedin.com/in/debdebashis" target="_blank">Debashis Deb</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Me
</li>
<li>Skills
</li>
<li>Interests
</li>
<li>Contact Me
</li>
<li>
<a> </a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid first">
<p>Welcome to my Page, Here you can find most of the informations related to me</p>
</div>
The problem that I'm facing is that, my last div is not getting displayed in the page. What mistake am I doing ?
On a fixed navbar you have to add a padding to the <body> of your site:
From the Bootstrap Documentation:
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.
Make sure to include this after the core Bootstrap CSS.
http://getbootstrap.com/components/#callout-navbar-fixed-top-padding
body {
padding-top: 70px;
}
See the following snippet (little changes to support the responsive navbar too): https://jsfiddle.net/17mmmxps/1/