I am trying to create Navbar for the website with two rows and margin-top: 0 for the top row. This code works but couldn't align the top row with zero margin.
---------------------------------------------------------------------
icon-image(small icon) slogan(text)
Site Logo company name
----------------------------------------------------------------------
Code.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<nav class="navbar-inverse nav-upper">
<div class="container-fluid">
<ul class="nav navbar-upper">
<li>
<a class="navbar-brand" href="#">
<span><img src="~/lib/images/icn.png" /></span>
website slogan
</a>
</li>
</ul>
</div>
</nav>
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span><img src="~/lib/images/_image1.png" /></span>
Company Name
</a>
</div>
</div>
</div>
CSS
.nav-upper ul.navbar-upper li {
margin-top: 0;
}
Is it something like that you want ?
Bootply : https://www.bootply.com/N7NZzIDoVm
Css :
.nav-upper ul.navbar-upper li {
margin-top: 0;
}
.nav-upper > div {padding:0;}
Related
I have problem with alignment of my logo in my navbar in Bootstrap.
I would like to align it with my website content, but it keeps shifting to the left. Any idea why this happens and how I can solve this? I was not able to find the solution.
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img alt="logo" height="13" width="100" src="{% static 'images/logo1.png' %}">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<p class="navbar-text project-title">Part Activity</p>
<ul class="nav navbar-nav">
<li>About</li>
</ul>
</div>
</div>
</nav>
CSS:
body {
padding-top: 50px;
}
.navbar-brand {
padding: 18px 0;
}
.project-title {
color: #cc0000 !important;
font-weight: bold;
}
.active-row {
background-color: #C6EFCE;
}
PROBLEM:
Use: col-sm-1 in <div class="navbar-hearder col-sm-1">
If you increase the width
of the image, you also need to increase:
col-sm-2..
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header col-sm-1">
<a class="navbar-brand" href="/">
<img alt="logo" height="13" width="100" src="{% static 'images/logo1.png' %}">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<p class="navbar-text project-title">Part Activity</p>
<ul class="nav navbar-nav">
<li>About</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Part Activity</h3>
<p>Master rsl</p>
</div>
I'm making the navbar of my Website with the following code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<img src="images/logo.png" class="img-circle">
</div>
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li> Liens </li>
<li> Login </li>
<li> Signup </li>
</ul>
</div>
</nav>
The problem is that the logo image is big (225x225 pixels), and I would like to set it to the default size of the navbar. But the opposite happens, i.e the navbar adapts to the size of the logo (and becomes very big).
I did not find any feature in bootstrap to do this ? Any idea ?
Thank you
navbar-fixed-top has a fixed height 50px, so you can directly style an image by setting e.g. max-height: 40px to it and margin: 5px to center image.
.navbar-header img {
height: 40px;
margin: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<img src="http://lorempixel.com/225/225" class="img-circle">
</div>
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li> Liens </li>
<li> Login </li>
<li> Signup </li>
</ul>
</div>
</nav>
I had the same problem sometime back and this is what I did . Hope this works for you
.brand{
max-height: 30px;
}
<a href="link/location/here" class="img-circle">
<img class="brand" src="img/logo.png">
</a>
I'm wanting items in my nav bar to stretch across the width of the screen when on lets say a laptop, and go one-under another when on a phone.
Also, I don't like how my items are pushed over to the left , i want them to be equally spaced across the screen.
HTML:
<!-- Logo -->
<div class="navbar navbar-default navbar-fixed-top" role="">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img src="assets/images/BridgmanLogo.png" alt="Logo">
</a>
</div>
</div>
</div>
<!-- SLIDER -->
<header class="container-fluid intro-slider">
<div class="bg-slider-wrapper">
<div id="bg-slider" class="flexslider bg-slider">
<ul class="slides">
<li class="slide slide-1">
<div class="push-text-slide"></div>
<section class="home-promo">
<div class="text-center">
<h2 class="titlepro">
<span class="upper">Welcome to</span>
<span class="middle"><strong>Bridgman IBC Ltd</strong></span>
<span class="bottom">An Example Tag Line Goes Here</span></h2>
<span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop
</div>
</section>
</li>
<li class="slide slide-2">
<div class="push-text-slide"></div>
<section class="home-promo">
<div class="text-center">
<h2 class="titlepro">
<span class="upper">Welcome to</span>
<span class="middle"><strong>Bridgman IBC Ltd</strong></span>
<span class="bottom">An Example Tag Line Goes Here</span></h2>
<span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop
</div>
</section>
</li>
<li class="slide slide-3">
<div class="push-text-slide"></div>
<section class="home-promo">
<div class="text-center">
<h2 class="titlepro">
<span class="upper">Welcome to</span>
<span class="middle"><strong>Bridgman IBC Ltd</strong></span>
<span class="bottom">An Example Tag Line Goes Here</span></h2>
<span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop
</div>
</section>
</li>
</ul>
</div>
</div>
</header>
<!-- NAVIGATION BAR -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-brand">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home
</li>
<li>About
</li>
<li>Specifying
</li>
<li>Market Sectors
</li>
<li>Shop
</li>
</ul>
</div>
</div>
</div>
If I understand you correctly, there are some changes you should do:
Read the css I added. I'm using flex to stretch the item equally in the menu.
Remove the .container div to stretch the navigation to the width of the window.
Remove the .navbar-right class from the navigation you don't need it.
I didn't take care about the mobile I'm sure you know how to do all those changes in desktop only using media query.
.navbar-brand, .navbar-nav, .navbar-nav>li {
float:none !important;
}
.navbar-nav {
display:flex;
}
.navbar-nav>li {
flex: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- NAVIGATION BAR -->
<div class="navbar navbar-default" role="navigation">
<!--<div class="container">-->
<div class="navbar-brand">
<ul class="nav navbar-nav">
<!--<ul class="nav navbar-nav navbar-right">-->
<li class="active"><span class="glyphicon glyphicon-home"></span> Home
</li>
<li>About
</li>
<li>Specifying
</li>
<li>Market Sectors
</li>
<li>Shop
</li>
</ul>
</div>
<!--</div>-->
</div>
http://jsbin.com/wisuyi/edit?html,css
You will have to use media queries to get responsive view.
.navbar-brand{
width:100%;
display:inline-block;
}
.navbar-brand ul li{
width:20%;
/*Adjust the percent based on 100/number of items (Here it is 5)*/
min-width:150px;
/*Keep a minimum width such that the text does not overflow*/
display:inline-block;
text-align:center;
}
/*Write media queries for Mobile and tablets*/
#media (max-width: 420px) {
.navbar-brand ul li{
width:100%;
}
}
Already try other solutions from this community, but nothing seams to work!!
I want to horizontally center the menu. The "logo" is left align on top of it.
Here is the code (no changes to css that matter to this):
<nav class="navbar navbar-default navbar-fixed-top">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<img class="logo" src="images/logo.png" />
<ul class="nav nav-pills">
<li>
<a href="#"><img src="images/menu/123.png" />
</a>
</li>
<li>
<a href="#"><img src="images/menu/456.png" />
</a>
</li>
<li>
<a href="#"><img src="images/menu/789.png" />
</a>
</li>
</ul>
</div>
<div class="col-lg-2">
</div>
</nav>
Edit: This solved the problem
ul {
width: 825px;
margin: auto;
}
Try changing this <div class="col-lg-8"> to this <div class="col-lg-8 col-lg-push-2 center-block">
Get rid of the two empty <div class="col-lg-2">
Try out this codes,
Bootstrap Centered Navigation
Bootstrap Centered Menu
well, solved:
ul {
width: 825px;
margin: auto;
}
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.