I am in trouble in my project for using bootstrap nav.
After nav is jumbotron div, but there is a bland gap between nav and jumbotron.
I have trid define nav:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
"navbar-fixed-top" can delete bland gap, but nav has hidden part of jumbotron. So the content of jumbotron is not in the middle of container.
Here is my code:
<style>
.navbar .nav li.active a:hover{color:#51c3e1}
</style>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid" style="height:70px">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="pic/logo.png" style="width:130px;height:40px;top:1px"></a>
</div>
<div></div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 style="white">Hello!</h1>
<p style="white">I love this world!!</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more ยป</a></p>
</div>
</div>
It seems nothing wrong, who can help me?
I have found the solution:
.navbar { margin-bottom:0px}
Related
Hello im trying to put my content area to the right of my vertical nav bar using bootstrap 4. in my current code the content area is under the menu. any suggestions on how to fix it so its next to the menu on the right side.
Thank you
<div class="container-fluid">
<div class="col-3">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#collapsibleNavbar" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="collapsibleNavbar" style>
<ul class="navbar.flex-column">
<li class="nav-item">
<a class="nav-link" href="index.html">Index</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="col-9">
<p>Main Content area</p>
</div>
</div>
Copy the col-9 div and place it after the col-3 div ends. Add d-flex flex-row classes with container-fluid class.
I have been trying to create a bootstrap footer using the class navbar-fixed-bottom, however I do not want this to be a fixed element and I want to have to scroll to it.
This is my existing code
Any help?
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left"><strong>Click08.co.uk</strong> is a <strong>Web Daddy</strong> project.</p>
<a class="navbar-btn btn btn-success pull-right" href="../Home.php">Return To Home</a>
</div>
</div>
I'm trying to center my logo in boostrap navbar.
I've been searching numerous ways and I found some that worked for me but the center content would cover all of the navbar (unable to click on other links).
So I wrote my own code. Pull left and right are working with no problems, but my center wont center!
Here are my codes.
(I've set the background color to be red on my center content so I have an idea of it's size and area)
The HTML
<nav class="navbar navbar-default" role="navigation">
<div class="navbar navbar-fixed-top">
<!--LEFT OF NAVBAR-->
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-align-left"></span>
</a>
</div>
<!--CENTER OF NAVBAR-->
<div class="navbar-header center">
<a class="navbar-brand" style="background:red;" href="#">Center</a>
</div>
<!--RIGHT OF NAVBAR-->
<div class="navbar-header pull-right">
<a class="navbar-brand" href="#" style="font-size:1em;">Sign In</a>
</div>
</div>
</nav>
The CSS
.center {
display:inline-block;
float:none;
margin-left:auto;
margin-right:auto;
text-align:center;
}
Here is my jsfiddle.
http://jsfiddle.net/ew64yt63/
You could add text-align:center to .navbar
Demo Fiddle
.navbar {
text-align:center;
}
Note that you may then need to change the text alignment for child elements.
Alternatively, you can offset and transform the element, e.g:
Demo Fiddle
.center {
display:inline-block;
position:relative;
left:50%;
transform:translateX(-100%);
}
I am not able to align the logo and the nav bar inside the container div. The navigation bar is always below the level of the image logo. I have tried some html align attributes but it did not fix the issue. I am using bootstrap CSS, so should I change something in there ?
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!--company logo and slogan-->
<img src="img/logo.png" alt="logo" />
<!--button for responsive navigation-->
...
<!--Nav bar-->
<div class="nav-collapse collapse">
<ul class="nav pull-right" >
...
</ul>
</div>
</div>
</div>
</div>
You could try to float left your img and your div tag as follow :
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="overflow: auto; ">
<!--company logo and slogan-->
<img src="img/logo.png" style="float: left; " alt="logo" />
<!--Nav bar-->
<div class="nav-collapse collapse" style="float: left; ">
<ul class="nav pull-right" >
...
</ul>
</div>
</div>
</div>
</div>
</header>
That should make them show at the same level.
I am trying to built a site with Bootstrap. So far everything is going pretty much as planned. I would like a fixed navbar and I am using the built in function:
<div class="navbar navbar-fixed-top">
This is great and just what I need BUT I would like the navigation and title to start at the same place as the container instead of all the way to the left/right (still having the navbar going 100% in width. I have tried to put a container inside the navbar which was not the correct solution :-)
example
<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>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Get started
</li>
...
<li>
Customize
</li>
</ul>
</div>
</div>
</div>
</div>
or throw
.navbar {
max-width: 1170px; /* width of .container */
margin: 0 auto;
}
into the css
You should have a container class nested inside your navbar
<div class="navbar navbar-fixed-top">
<div class="container">your menu and logo go here</div>
</div>
That will give you the same width as the body container if you do not have a fluid layout and will give auto margins to the container so it is centered in the middle of the screen. It will also keep the navbar itself at 100%