I'm trying to put the height of the navigation bar at 40px, but when I put it and i resize the web page the dropdown menu doesn't work properly.
Code:
<nav class="navbar navbar-inverse navbar-fixed-top" id="barranavegacion">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
<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" style="color:white; font-size: 16pt"">Gangatravel
</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li><a id="texto" href="http://vuelos.gangatravel.es/" target="_blank">Vuelos</a></li>
<li><a id="texto" href="http://hoteles.gangatravel.es/" target="_blank">Hoteles</a></li>
<li><a id="texto" href="#">Coches</a></li>
<li><a id="texto" href="http://rutas.gangatravel.es/es/s/" target="_blank">Rutas</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="IMAGENES/youtube2.png"/></li>
<li><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="IMAGENES/twitter2.png"/></li>
<li><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="IMAGENES/facebook2.png"/></li>
<li><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="IMAGENES/google.png"/></li>
</ul>
</div>
</div>
</nav>
#barranavegacion{
background-color:#333;
border: none;
height: 40px;}
There was problem with your HTML <a class="navbar-brand" style="color:white; font-size: 16pt"">Gangatravel</a> has additional "
Bootstrap uses responsive design.You changed globally the height of the menu, when you should had only for some screen sizes using #media css query
Here is working example http://jsfiddle.net/kaohLdyg/
Related
I'm working on my first bootstrap project and is currently setting up the navbar.
What I want: When the XS model is activated (or whats is called), I want to change the font-size of the header, change the height of the navbar and make the header align to left.
And everything must of-course scale correctly.
Is there any clever way of doing this??
<nav class="navbar navbar-default navbar-fixed-top">
<div style="text-align:center;">
<header style="font-size:48px;color:black;">
My Header
</header>
</div>
<div class="container" style="padding:0px;">
<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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="text-transform:uppercase;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</nav>
You would need to use media queries, the Bootstrap switch points are below.The smallest 576 would be your starting point, you can reference media queries here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Bootstrap:
#media(min-width:576px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
Ok, I think I've figured it out.
HTML:
<nav class="navbar navbar-xs navbar-default navbar-fixed-top" style="padding:0px;margin:0px;">
<div class="hidden-xs" style="text-align:center;">
<header style="font-size:48px;">
<a href="/" style="color:black;">
Header
</a>
</header>
</div>
<div class="visible-xs pull-left" style="margin:8px;">
<header style="font-size:28px;">
<a href="/" style="color:black;">
Header
</a>
</header>
</div>
<div class="container" style="padding:0px;">
<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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="text-transform:uppercase;">
<li><a asp-controller="Projects">Projects</a></li>
<li><a asp-controller="Visuals">Visuals</a></li>
<li><a asp-controller="Now">Now</a></li>
<li><a asp-controller="About">About</a></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar {
min-height: 60px;
}
.navbar-brand {
padding: 0 15px;
height: 60px;
line-height: 60px;
}
.navbar-brand, .navbar-nav li a {
line-height: 60px;
height: 60px;
padding-top: 0;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-collapse {
max-height:60px;
}
.navbar-toggle {
margin-right:28px;;
}
Currently I'm learning Bootstrap 3 and I need help with re-order the layout of navbar in small screen.
I've followed the example in LINK
I've replaced Default / Static / Fixed with user profile
So what I want to change is when the screen is small I will have
|---------- BRAND ----------|
|[-]----------------------profile|
Here is my sample code:
#media (max-width: 767px) {
.navbar-brand {
width: auto;
float: none;
border-bottom: 0 solid transparent;
margin: 0 -15px;
}
.navbar-toggle {
float: left;
}
.nav-user-profile .navbar-nav {
margin: 0;
}
.nav-user-profile .navbar-nav>li {
position: static;
float: left;
}
.nav-user-profile .navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
}
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">Brand</div>
<div class="navbar-header">
<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>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="nav-user-profile navbar-right">
<ul class="nav navbar-nav">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
How can I achieve it?
Thanks for ideas
I think this is what you're trying to do based on your diagram. Probably the simplest way to go is to create a div above the navbar for a second brand location. You can hide one or the other brand location with a hidden/visible class. And the profile link can be placed inside the navbar-header so it's visible across all viewports, it just needs to be positioned correctly on the right and the navbar-toggle floated to the left.
See working Snippet.
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
#media (max-width: 767px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
}
<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" />
<header class="visible-xs-block"> <a class="header-brand" href="#">Brand</a>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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 hidden-xs" href="#">Brand</a>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
I only added text-right very simple look where I noted with //changes*
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">Brand</div>
<div class="navbar-header">
<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>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
//changes*
<ul class="nav navbar-nav text-right">
//changes*
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="nav-user-profile navbar-right">
<ul class="nav navbar-nav">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
pull-right class may help you...
or
bootstrap is divided to 12 columns for large, medium and small size
So when it breaks into small size give brand to full 12 columns using col-sm-12 class so it will break profile to down
I'm trying to put the height of the navigation bar at 40px after resize the page, but when I put it and I resize the web page, the height of the navbar is higher than 40px, I tried it with
#media (min-width:768px){
#barranavegacion{
background-color:#333;
border: none;
height: 40px;
}
}
The website is: http://vuelos.gangatravel.es/ to see my problem easily after resize the page.
Navbar code:
<nav class="navbar navbar-inverse navbar-fixed-top" id="barranavegacion" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
<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 style="max-width:100px; margin-top: -7px;" src="http://pixelup.wc.lt/up/img/cc3c887b0f.png" />
</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li class="active"><a style="font-size: 14pt;" href="#">Vuelos <span class="sr-only">(current)</span></a></li>
<li><a style="font-size: 14pt;" href="http://hoteles.gangatravel.es/" target="_blank">Hoteles</a></li>
<li><a style="font-size: 14pt;" href="#">Coches</a></li>
<li><a style="font-size: 14pt;" href="http://rutas.gangatravel.es/es/s/" target="_blank">Rutas</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/29ed8fbcb8.png"/></li>
<li><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/ffb14b6235.png"/></li>
<li><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/c38838d8fa.png"/></li>
<li><img style="max-width: 30px; max-height: 30px; margin-top: -12px;" src="http://pixelup.wc.lt/up/img/73a02977d4.png"/></li>
</ul>
</div>
</div>
</nav>
The problem comes with the bootstrap's .navbar css: min-height: 50px;
#media (min-width:768px){
#barranavegacion{
background-color:#333;
height: 40px;
min-height: 40px;
}
}
IMPORTANT NOTE: This will do the trick, but there are more inner elements, such as container-fluid, which uses min-height: 50px;.
Try this :
#media (min-width:768px){
#barranavegacion{
background-color:#333;
border: none;
height: 40px !important;
max-height: 40px !important;
}
}
I'm not completely sure as to why my a href links aren't working...At one point in time it was working, I did some research on the Z-Index but that doesn't seem to be the problem, nor do I have an overlapping div.
Please visit the JSFIDDLE.NET for the demo.
<nav class="navbar-default">
<div class="util-bar-content">
<div class="container">
<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="#"><img src="images/util-bar-logo.png" /></a> </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
<p style="margin-top: 6px; max-height: 36px;">1(800) 000 - 0000</p>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
</div>
</div>
</div>
</nav>
Here's the CSS
.navbar-nav > li > a, .navbar-brand {
padding-top: 8px !important;
padding-bottom: 0 !important;
height: 36px;
}.navbar-brand {
padding-top: 0px !important;
padding-bottom: 0 !important;
height: 36px;
}.navbar {
min-height: 36px !important;
}
I'm using the BootStrap Framework.
Change your give your links a class of link and then set that class to have a z-index of 9999;
Example:
<li>
<a class="links" href="#">About</a>
</li>
.links {
z-index:9999;
}
I'm trying to make double level menu in Bootstrap 3 to look like this:
I'm having trouble with menu on top of margin-top (I don't know how to od it because i have already customized menu to custom height)
Here's code
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container navbar_height">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand-left"></div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="hover_navbar glyphicon glyphicon-home" href="#"></a></li>
<li><a class="hover_navbar" href="#">ITEM1</a></li>
<li><a class="hover_navbar" href="#">ITEM2</a></li>
<li><a class="hover_navbar" href="#">ITEM3</a></li>
<li><a class="hover_navbar" href="#">ITEM5</a></li>
<li><a class="hover_navbar" href="#">ITEM6</a></li>
</ul>
</div
</div>
And I added some css
#media (min-width: 1023px){
.navbar{
position: relative;
min-height: 50px;
margin-bottom: 0px !Important;
border: 1px solid transparent;
}
.navbar_height{
margin-top:40px;
}
.navbar-inverse .navbar-nav > li > a:hover{
border-bottom: 4px solid #a6ba0d
}
.navbar-right{
border-top: 1px solid #ededed;
}
.navbar-brand-logo img{
margin-top:-20px;
}
}
Sorry i didn't put code on jsfiddle (it's not working on my browser)
Answer is simple , i made it:
after :
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
I added:
<div class="navbar-collapse collapse desktop-only">
<ul class="nav navbar-nav pull-right desktop-only">
<li><a class="" href="#">item1up</a></li>
<li><a class="" href="#">item2up</a></li>
<li><a class="" href="#">item3up</a></li>
</ul>
</div>
and some css to be visible only in desktop:
#media (max-width: 1023px){
.desktop-only{
display:none;
}}