Remove space between navbar and header - html

I have a weird margin below bootstrap navbar and I don't know how to remove it. Any solutions with manipulate with margin or padding doesn't working.
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#"><span class="glyphicon glyphicon-home"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Active example <span class="sr-only">(current)</span></li>
<li>Example 3</li>
<li>Example 2 </li>
</ul>
</div>
</div>
</nav>
<!-- HEADER -->
<div class="container-fluid" style="margin-top: -20px; margin-bottom: 25px;">
<div class="row">
<img src="http://thehrblog.ecornell.com/wp-content/uploads/sites/2/2013/04/communication.png" class="img-responsive">
</div>
</div>
CSS
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: #007DBE;
color: #FFF;
}
Example is here: Jsfiddle (please resize 'Result' if menu in navbar is hidden).
I need to remove this space:
for get this:

The file navbar.less is adding a border on the navbar:
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
So you can use this to reset:
.navbar-fixed-top {
border:0;
}
UpdatedFiddle

Change
.navbar-fixed-top {
border-width: 0 0 1px;
top: 0;
}
to
.navbar-fixed-top {
border-width: 0;
top: 0;
}

Related

Menu element appears at the bottom

I am using Bootstrap to show a nav-bar:
As you may see in the screenshot, the first menu element appears at the bottom, not at the same height as the others menu elements.
Here is the CSS and HTMl code:
CSS
<style>
body {
font-family: 'Roboto', serif;
font-size: 16px;
}
#portada {
background-color: #F1F7F8;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #4496B0; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #4496B0;
}
.navbar-default {
background-color: #94C3D2;
border-color: #4496B0;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: white; /*Change active text color here*/
}
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 68px;
padding: 7px 15px;
width: 180px;
}
</style>
HTML
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-brand">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<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="index.html"><img src="imagenes/logo_pleca.png" alt="Vico">
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li >Inicio</li>
<li class="active">Doctores</li>
<li>Hospitales</li>
<li>Farmacias</li>
<li>Laboratorios</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contactar</li>
<li>Login</li>
</ul>
</div>
</nav>
</div>
I am not able to find a solution for this issue.
Close </a> image
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header navbar-brand">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<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="index.html"><img src="imagenes/logo_pleca.png" alt="Vico"></a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Inicio</li>
<li class="active">Doctores</li>
<li>Hospitales</li>
<li>Farmacias</li>
<li>Laboratorios</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contactar</li>
<li>Login</li>
</ul>
</div>
</nav>
</div>
Check this fiddle Fiddle
Few tag missing check HTML code:
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-brand">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<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="index.html"><img src="imagenes/logo_pleca.png" alt="Vico"></a>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Inicio</li>
<li>Doctores</li>
<li>Hospitales</li>
<li>Farmacias</li>
<li>Laboratorios</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contactar</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
</div>
Problem is <a class="navbar-brand" href="index.html"><img src="imagenes/logo_pleca.png" alt="Vico"> there is no closing anchor tag which is the reason for improper layout.
It should be
<a class="navbar-brand" href="index.html">
<img src="imagenes/logo_pleca.png" alt="Vico">
</a>
</div>
Demo : https://jsfiddle.net/yn2xeq6z/

Bootstrap HTML fit alert into navbar

This is probably a simple CSS trick. I need an alert to fit inside the navbar after the home icon between the other icons which are pull-right.
The alert needs to fit inside the spot given.
Examples:
Desktop
Mobile
Current appearance:
CSS that affects the navbar:
.navbar {
margin-bottom: 0;
background-color: #396B99;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #396B99 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
Current navbar HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#myPage"><span class="glyphicon glyphicon-home logo-inverse"></span></a>
<!-- Where the alert should go? -->
<div class="alert alert-info">
<strong>Service Alert</strong> There is something wrong, and we need to alert you about it.
</div>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>about</li>
<li>products</li>
<li>contact</li>
<li>recent news</li>
</ul>
</div>
</div>
</nav>
Hope this helps, threw together a quick bootstrap menu with an alert in it
.alert-float{
height: auto;
max-width: 500px;
top: 0;
margin: 0 auto;
}
/*the following just removes mobile scaling so I can properly show you the alert*/
.navbar-collapse.collapse{
display: block !important;
}
.navbar-nav>li, .navbar-nav{
float: left !important;
}
.navbar-nav.navbar-right:last-child{
margin-right: -15px !important;
}
.navbar-right{
float: right !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<div class="alert-float" style=" position: absolute; top: 0; left: 130px; right: 30px; z-index: 9999;width: 65%">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Test
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
You just need to tweak the CSS stylign to get it to fit where you want. Mainly the display appearance should be inline-block.
After that, you might want to set max-widths so it doesn't spill over to the nav. Some media queries might be needed also.
Or try floating it left, and see what that looks like.
Can you make a JSFiddle?
JavaScript might work. Just add another link and hide it. Am using an error in this example for when the alert is shown.
<li>Alert!</li>
Example of JavaScript:
$("#alert").hide();
var error == false;
if (error == true){
$("#alert").show();
}
You can add the alert where you put your comment, using the navbar-text class
You can see it here in action
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#myPage"><span class="glyphicon glyphicon-home logo-inverse"></span></a>
<p class="navbar-text">Put you alert HERE with class navbar-text</p>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>about</li>
<!--<li>PORTFOLIO</li>-->
<li>products</li>
<!--<li class="dropdown">
<a class="dropbtn" data-toggle="dropdown" href="">
products
<span class="caret"></span>
</a>
<ul style="list-style:none !important; padding:0px 0px !important;" class="dropdown-content">
<li>CPR-Web</li>
<li>SC-Tracker</li>
<li>Page 1-3</li>
</ul>
</li>-->
<li>contact</li>
<li>recent news</li>
</ul>
</div>
</div>
</nav>

Bootstrap line break between nav bar

I am trying to use bootstrap so that i can make a line break between each of my nav menu.
For example:
Hi | Hi1 | h3
I need it so that the bar at the end also does not show after h3.
I have tried this so far but its not working, its pushing all the nav functions down to the bottom.
HTMKL:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<div class="logo">
<img src="Image/Logo.png" class="img-responsive"/>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Login</li>
<li>Become A member</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
CSS:
.navbar-default .navbar-nav > li + li:before {
content: "";
display: inline-block;
vertical-align: middle;
border-left: 1px solid #ffffff;
height: 2.5em;
}
For some reason it does create the lines but it pushs all my texts down. Thanks for all the help.
Here's an example of how you can do this with pseudo elements (:after). You dont need the positioning rules your currently using (which are the cause of your misaligned links). Use position: absolute and apply a height.
As far as the last li, use :last-child:after to remove the border.
See MDN Pseudo-elements
Working example Snippet (with Active class)
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
right: 0;
top: 25%;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Working example Snippet without Active
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
right: 0;
top: 25%;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Example Snippet Mobile
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
top: 25%;
}
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav > li:after {
right: 0;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
This can be achieved by setting borders.
HTML:
<ul class="navbar-nav mr-auto">
<li class="nav-item">
About us
</li>
<li class="nav-item">
Our Services
</li>
<li class="nav-item">
Solutions
</li>
<li class="nav-item">
Contact
</li>
</ul>
SCSS
.navbar-nav {
li.nav-item {
.is-active {
color: $blue;
border-bottom: 2px solid $violet;
}
.nav-link {
margin: 0 8px;
padding: 0;
}
// for nav navbar-expand-lg
#include media-breakpoint-up(lg) {
border-right: 2px dotted $black;
&:last-child {
border-right: none;
}
}
}
}
This will display a border line to the right, also hides for the last.
This is so inane but I it might help someone else. I had <br> blending in after the navbar item link, and it took me forever to spot. Be wary of any errant <br> tags!

Bootstrap nav menu hover color

I'm trying one hour to change hover color of nav-menu, but I was not able to do that. I can't find hover attribute in css for the menu.
Here is page:
http://jazbinasolutions.com/rooney
If you hover over the top menu links you will see they are getting white and actually being invisible.
Any help will be appreciated.
Thanks
This is the code you are looking to change:
.navbar-inverse .navbar-nav>li>a:hover {
color: #fff;
background-color: transparent;
}
You should use a more specific rule to override it:
.navbar.navbar-inverse.navbar-fixed-top .navbar-nav>li>a:hover {
color: #000;
}
This is your exact code with specific selectors, you don't (and should not use !important unless totally warranted). You should also consider using custom classes when altering a framework.
See working example in Snippet.
html,
body {
height: 100%;
}
body {
padding-top: 50px;
}
.navbar.navbar-custom {
background: white;
}
.navbar.navbar-custom {
min-height: 85px;
}
.navbar.navbar-custom #bs-example-navbar-collapse-1 {
padding-top: 22px;
}
.navbar.navbar-custom .navbar-nav > li > a:hover,
.navbar.navbar-custom .navbar-nav > li > a:focus {
color: #333333;
background-image: none;
}
.navbar.navbar-custom {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="index.html">
<img src="http://www.jazbinasolutions.com/rooney/images/ElregLogo2.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li> Home
</li>
<li> About Us
</li>
<li> Projects
</li>
<li> Kompetanse
</li>
<li> Kontakt
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>

why is my navbar not full width

I have a simple navbar, but it refuses to go the uill 12 col width.
<!--Mobile NAV BAR ROW-->
<div class="row row-nomargin">
<div class="col-md-8 col-md-offset-2">
<nav class="navbar navbar-default navbar-left">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Gallery</li>
<li>Pricing</li>
<li>About us</li>
<li>Contact us</li>
</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
Its priob something i've overwritten in css (i shouldn't do that) but i cant see what
.navbar .nav > li > a {
color: white;
}
.navbar-default {
/*Overwrites bootstrap css*/
box-shadow:
border: 0;
margin-bottom:0;
/*background-image: url('../img/navbarbackground1.png');*/
font-family: 'Cooper Black';
background-color: rgb(1,165,228);
/*background-color: rgba(0,0,0,0.0);*/
/*border: 2px dashed #FFFFFF;box-shadow: 0 0 0 0px #A0785A, 2px 0px 20px 0px;*/
}
.navbar-fixed-bottom {
/*Overwrites bootstrap css*/
background-image: url("../img/backgroundImage.jpg");
}
.nav-tabs{
/*MFOHARE Specific css*/
right: 0px;
color: white;
}
.row-nomargin{
margin: 0px;
}
Any ideas whats goimng on here - my navbar is only as wide as the links on it.
You have the class navbar-left on your nav element. navbar-left does one thing:
.navbar-left {
float: left !important;
}
So your entire nav will float left and shrink to fit the items within it. You can probably just remove that class and it will fix your issue.