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.
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
How can I make a responsive navigation bar where it does not cover the top of my page? I am using thymeleaf framework, and twitter bootstrap.
My Navigation code
<div th:fragment="header">
<div class="navbar navbar-inverse navbar-fixed-top" style="background-color:black;">
<div class="container">
<div class="navbar-header">
<div id="logo"><img th:src="#{/images/bg.jpg}" /></div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a th:href="#{/}">Home</a></li>
</ul>
</div>
</div>
</div>
</div>
I don't have much css for this part because I am using twitter bootstrap.
Css
#logo
{
display:inline-block;
}
Here is an image that is blocking my page.
Take out the class navbar-fixed-top and see if that solves your issue.
I have this header in my Bootstrap template:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
//Some unrelated stuff
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
//Some unrelated stuff
</ul>
<ul class="nav navbar-nav pull-right-custom">
<li class="dropdown">
DDButtonText <strong class="caret"></strong>
<ul class="dropdown-menu">
Test
</ul>
</li>
</ul>
</div>
</div>
</nav>
What I'm trying to accomplish is to make the dropdown menu the same width as the 'DDButtonText' thing. I tried setting min-width to dropdown-menu but it was different for each browser. It was alright in my Firefox but Chrome and other browsers showed a little different sizes.
How do I make my menu be the same size as the button regardless of browser, always?
You can try adding this:
CSS:
.nav .dropdown-menu{
width: 100%;
min-width: inherit;
}
Bootply: http://www.bootply.com/MfkTjxasD7
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/
Using Bootstrap v3.3.4, I'd like to have my navbar centered to the main content on the screen (instead of sticking to the left) while having the navbar items appear right-justified within that centered area. Can this be done?
Here's the page I'm working on:
http://test.scoe.net/exmpl/register.html#
For the first question just place the div containing your menu item inside a nav and a container . For the second in ul setnavbar-right` class
like this
<nav class="navbar-default navbar-fixed-top navbar" role="navigation">
<div class="container"><div class="navbar-header">
.........
<a class="navbar-brand" href="........" >YourBrand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav navbar-right nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>