Maybe it looks simple but it became a problem for me:
I need logo and all of the li a elements to be aligned to bottom and on one line, padding, margin?
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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 class="logo" alt=" logo" src="Logo.png" height="35" width="50" >
<span class="logo-text">logo text</span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right ">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
.navbar-brand is 100% height within the navbar, however it's padded out so that any text is middle aligned. When I need to stick an image in that element, or any other navbar elements for that matter, I use a CSS background-image like so:
.navbar-brand {
width: 170px; /* Your image width */
background: url(../img/logo.png) center bottom no-repeat;
}
This gives you good control over the image position.
Related
what I'm trying to do is to split my navbar in left, center and right, on left it will be the Application name, on the center the different menu options but the text centered, on right should be the app logo (this will be hidden when minor resolutions appear) something like the below image
At the moment this is what I have (navbar title needs to be on the middle align, menu options and user info centered and the logo should be on right instead of next to menu)
<div class="navbar navbar-default navbar-static-top" role="navigation">
<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="#">
<h2>Application Name</h2>
</a>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li class="active">Home</li>
<li>About</li>
</ul>
<p class="navbar-text">
<span class="welcome">
Welcome, Richard Sanchez
</span>
</div>
<div class="navbar-logo navbar-right">
<a class="navbar-brand" rel="home" href="#" title="Home">
<img width="300" height="40" src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png" class="img-responsive">
</a>
</div>
</div>
</div>
Here is a fiddle to play with
Pd. I'm using bootstrap 3.3.7
I have a logo inside header menu bar. The logo appears on top left corner of the header. When I viewed on smaller devices logo is hidden inside hamburger menu. Is there a way when viewed on smaller devices we can show logo on top center, if viewed on larger devices same as it is, which means top left corner
I am using bootstrap 3.3.7
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<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>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="navbar-logo">
<img src="Images/Logo.jpg" ui-sref="homeIndex" style="cursor:pointer;" alt="Virginia System of Care" height="60" width="140" />
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="homeIndex">Home</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
i change place of your image, so it cant be hide in small resolution and for center logo in small resolution i added some CSS that apply only in small resolution
#media only screen and (max-width: 768px) {
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
#media only screen and (max-width: 768px) {
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-inner">
<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>
<img src="" class="navbar-brand" ui-sref="homeIndex" style="cursor:pointer;" alt="Virginia System of Care" height="60" width="140">
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a ui-sref="homeIndex">Home</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
here my logo shows down of my navbar, ¿how can i move it to my navbar and resize it?
wrong position
here is my code
Code:
<body>
<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.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class=""active><a href"#">Home</a></li>
<li>about</li>
<li>discord</li>
</div>
</nav>
</body>
Ok I have fixed the css and check the below live example.
You have to give fixed width and height to the .navbar-brand class and then just add following css to the img inside as it will cover up the whole .navbar-brand
.navbar-brand img {
width: 100%;
height: 100%;
}
Live example:
https://codepen.io/anon/pen/rvXzEg
I am trying to push the navbar line (and obviously the content as well) down according to logo height. Here is my HTML code:
<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
<div class="container">
<div class="navbar-header transparent">
<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>
<a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>
<div class="row">
<div class="col-lg-12 custom-navbar-line">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills custom-nav-pills">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">Page1</a></li>
<li><a ng-href="#">Page2</a></li>
<li><a ng-href="#">Page3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
What I want:
What I get:
Note: Custom css classes have not much to do with the positioning.
You may try something like this:
HTML:
<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>
CSS:
a.navbar-brand { /*or add another class instead of changing this*/
display:block;
margin:50px 0 10px 0; /* Adjust the margin : top right bottom left */
}
Just keep some margins on top and bottom of that <a> tag. Don't depend on other elements for margin of that <a> tag, instead apply cssrule on itself for it's margin.
Or just put in inside another .row:
<div class='row'>
<a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>
</div>
Close your the <div class="container"> and open a new container with a margin top around the second row of the nav bar.
Bootply example
Updated HTML:
<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
<div class="container">
<div class="navbar-header transparent">
<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>
<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>
</div>
<div class="container new-nav-line">
<div class="row">
<div class="col-lg-12 custom-navbar-line">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills custom-nav-pills">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">Page1</a></li>
<li><a ng-href="#">Page2</a></li>
<li><a ng-href="#">Page3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS:
.new-nav-line{
margin-top:20px;
}
i want recreate this image:
in a navbar-fixed-top using Bootstrap, at the moment i have add this custom CSS:
navbar-fixed-top.css
.navbar {
background-color: #8CB5A0;
background-image: none;
}
and this is the bootstrap code of the navbar:
<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" href="#">Project Name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li>
About
</li>
</ul>
</div>
</div>
</div>
and this is the css:
but how i can add the double red border, because there are two type of red, or better i can add directly the image as background?
Here is a better option making use of box-shadow
Double border
Add the image a background like so background: url("urltoimage") repeat-x;