Bootstrap 3 navbar height after resize - html

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;
}
}

Related

Brand Image too big and not aligned on Bootstrap navbar

I am having some problems with my navbar-brand for the navbar on my site. I want it to appear vertically aligned and as a smaller size, could you suggest how this could be achieved.
<div class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #FFFFFF">
<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" href="/"><img src="http://www.howlongagogo.com/assets/GOGO.png"></a></div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Enter Date</li>
<li class="hidden-xs" style="padding-top:15px"><div class="fb-like" data-href="https://www.facebook.com/howlongagogo" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div style="width:100%;height:10px;background-color:#428BCA;"></div>
</div>
I have also created a bootply for convenience http://www.bootply.com/XDybrUMhJ2
Thanks
You can constrain the size of the image and use line-height to center things. See SO Post also.
.navbar.navbar-wrap3 .navbar-brand {
padding: 0;
margin: 0;
}
.navbar.navbar-wrap3 .navbar-brand img {
height: 75px;
width: 300px;
padding: 0;
margin: 0;
left: 0;
}
.navbar.navbar-wrap3 {
background: #77B69C;
border-bottom: 10px solid #428BCA;
}
.navbar.navbar-wrap3 .navbar-header {
height: 75px;
}
.navbar.navbar-wrap3 .navbar-toggle {
margin-top: 20px;
}
#media (min-width: 768px) {
.navbar.navbar-wrap3 .navbar-nav > li > a {
line-height: 45px;
}
}
#media (max-width: 360px) {
.navbar.navbar-wrap3 .navbar-brand img {
height: auto;
width: 210px;
padding: 0;
margin: 4px 0;
left: 0;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
line-height: 20px;
}
.navbar.navbar-wrap3 .navbar-toggle {
margin-top: 8px;
}
.navbar.navbar-wrap3 .navbar-header {
height: auto;
}
body {
background: 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="navbar navbar-default navbar-fixed-top navbar-wrap3" role="navigation" style="background-color: #FFFFFF">
<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" href="/">
<img src="http://www.howlongagogo.com/assets/GOGO.png">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Enter Date
</li>
<li class="hidden-xs" style="padding-top:15px">
<div class="fb-like" data-href="https://www.facebook.com/howlongagogo" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<div style="width:100%;height:10px;background-color:#428BCA;"></div>
</div>
Replace code
<a class="navbar-brand" href="/"><img src="http://www.howlongagogo.com/assets/GOGO.png"></a>
with
<a style="background-image: url("http://www.howlongagogo.com/assets/GOGO.png"); width: 324px; height: 68px;" class="navbar-brand" href="/"></a>

have some issues with my bootstrap and css

I want to fix the logo on the navigation bar , I want to either increase the height of navigation bar and fix it without adjusting the image size amd When i shrink the website to mobile view , The Logo is seen below the collapse button .
Preview of the website (http://threeguys.us/works/testing.html)
testing.html
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
style.css
.jumbotron
{
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
}
.container
{
padding:0px;
}
.navbar
{
height: 60px;
background-color: transparent;
border:0px;
padding-top: 0px;
}
.navbar-header
{
width:70px;
background-color: transparent;
}
ul
{
padding:0;
}
.call_button
{
margin-top : 428px;
}
.content
{
background-color: white;
padding-top:0px;
}
.footer-nav
{
text-align: center;
}
.text_order
{
background-image: url(images/text_order/rectangle.jpg);
text-align: center;
padding: 5px;
}
.text_order p
{
font-size: 20px;
}
.footer-nav li
{
display: inline;
}
.footer-nav li a
{
padding-left: 50px;
text-decoration: none;
color: #f7ab00;
}
.footer-nav li a:hover
{
color:black;
}
Based on your question, comments and screenshots here are the following recommendations:
Remove this CSS code from style.css so collapse button is on the right (and not above the logo):
.navbar-header {
width:70px;
background-color: transparent; //don't necessarily need to remove this one but it isn't serving a purpose currently
}
To get the nav outside of the jumbotron whilst keeping the full image screen, perform the following updates:
Update testing.html to the following:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
Update your style.css jumbotron class and navbar class to the following:
.jumbotron {
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
margin-top: -80px; //include this account for the height of the navbar and it's margin
}
.navbar {
height: 60px;
background-color: transparent;
border: 0px;
padding: 0 120px; //the 120px value will push the logo and menu nav closer together. You will need to update your collapse breakpoints though. Adjust as you see fit.
}
If I haven't answered all your questions please comment below so I can update my answer.
Modify the flow of your HTML. Avoid putting nav inside .container.
Use a structure like this
This will put the logo inside the header as well as put it before the collapse button in mobile view.

Bootstrap 3 navbar height

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/

A href links not clickable or highlightable

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;
}

How do I align a Logo next to navigation links that are horizontally centered?

I've been struggling the last several hours with positioning my logo just to the right of the centered navigation links in a responsive Navbar. Tried dozens of ways to get this to work without any luck. I left most of the CSS for the Navbar intact; BootStrap 3. Any assistance would be greatly
appreciated! Link to site is:
Many Thanks!
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="indexalt.html">
<img src="data2/test5.png" width="61" height="48">
</a>
<div class="navbar-text"> <span class="FutureFont">Future Youth <span style="color:#ee1b04; font-size: 16px;">R</span>ecords</span>
</div>
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
NEWS
</li>
<li class="dropdown">
ABOUT US
<ul class="dropdown-menu">
<li>Our Team
</li>
<li>Mission
</li>
<li>Contact
</li>
</ul>
</li>
<li>PROJECTS
</li>
<li class="dropdown">
MEDIA
<ul class="dropdown-menu">
<li>Audio
</li>
<li>Video
</li>
<li>Photos
</li>
<li>Enter Download Code
</li>
</ul>
</li>
<li>DONATE
</li>
</ul>
</span>
<div class="sociallinks pull-right">
<a href="">
<img id="aks" src="data2/FB1.png" width="32" height="32">
</a>
<a href="">
<img id="akst" src="data2/Twitter1.png" width="32" height="32">
</a>
<a href="">
<img id="aksy" src="data2/youtube1.png" width="32" height="32">
</a>
</span>
</div>
</div>
<!--/.nav-collapse -->
</div>
</nav>
Your html had unclosed divs, extra divs, wrong classes, and lots of issues. It's best to follow examples on the GetBootstrap.com to the letter and comment and indent your code. When you have a problem that requires getting help, always make an effort to use clean, valid, html with following the documentation.
The .navbar for Bootstrap is very specific, it's left or right and that's it. You have to understand CSS and positioning etc., to change it around. And you also have to be adept at responsive CSS and become very fluent with the Bootstrap CSS as well.
This is not the finished product. The height of the navbar in this situation is dependent on the height of the tallest child, the logo. The logo is 60px tall with 10px padding on the top and bottom, 80px line-height on the first child of the links is used to make it center inside there. Otherwise there would be a lot more CSS to create.
DEMO: https://jsbin.com/tupay/1/
https://jsbin.com/tupay/1/edit?html,css,output
HTML:
<!-- Fixed navbar -->
<nav class="navbar-center navbar-inverse navbar-fixed-top" role="navigation" id="nav">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="logo" href="indexalt.html">
<img src="http://placehold.it/60x60/ffffff/000000&text=LOGO">
</a>
<div id="navbar" class="my-collapse collapse">
<ul class="navbar-center navbar-nav nav">
<li>
NEWS
</li>
<li class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu">
<li>Our Team
</li>
<li>Mission
</li>
<li>Contact
</li>
</ul>
<!--/.dropdown-menu -->
</li>
<li>PROJECTS</li>
<li class="dropdown">
MEDIA <span class="caret"></span>
<ul class="dropdown-menu">
<li>Audio
</li>
<li>Video
</li>
<li>Photos
</li>
<li>Enter Download Code
</li>
</ul>
<!--/.dropdown-menu -->
</li>
<li>DONATE
</li>
</ul>
<!-- /ul.navbar-center -->
</div>
<!--/.my-collapse collapse -->
<div class="social-links clearfix">
<a href="#">
<img src="http://placehold.it/64x64/ffffff/000000&text=X">
</a>
<a href="#">
<img src="http://placehold.it/64x64/ffffff/000000&text=X">
</a>
<a href="#">
<img src="http://placehold.it/64x64/ffffff/000000&text=X">
</a>
</div>
<!--/.social-links -->
</div>
<!--/.container -->
</nav>
<!-- /nav.navbar-center -->
CSS
nav.navbar-center.navbar-inverse {
background: #000
}
.navbar-center .social-links a {
width: 32px;
height: 32px;
float: left;
padding-right: 5px;
}
nav.navbar-center .social-links {
float: left;
padding: 27px 0 10px 0;
}
nav.navbar-center img {
max-width: 100%;
height: auto;
}
nav.navbar-center .logo {
float: left;
padding: 10px 20px 10px 0;
}
.navbar-inverse button.navbar-toggle {
margin: 0;
border: none;
border-radius: 0;
padding: 10px;
width: 50px;
height: 80px;
}
.navbar-inverse button.navbar-toggle .icon-bar {
width: 100%;
display: block;
margin: 5px 0;
height: 3px;
border-radius: 0;
background:#fff;
border:0px;
padding: 0;
}
#media (max-width:767px) {
nav.navbar-center .my-collapse {
clear: both;
padding: 10px 0;
}
}
#media (min-width:768px) {
nav.navbar-center img {
width: 100%;
height: auto;
}
nav.navbar-center .container {
text-align: center;
max-width: 980px;
}
#navbar.my-collapse.collapse {
visibility: visible;
display: inline-block;
}
ul.navbar-center > li > a {
padding: 0 15px;
line-height: 80px;
}
nav.navbar-center .logo {
padding: 10px 0 10px 0;
text-align: left;
float: left;
}
nav.navbar-center .social-links {
line-height: 80px;
float: right;
padding: 0;
}
}