I would like to add a separator line between menu items in the responsive Bootstrap navbar. I tried using border-bottom, but I need it to be inset on both sides. Here is what I am trying to achieve (the color is not the point here):
As you can see the line does not start from the edge of the screen.
How can I achieve this?
Here is my current code:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in hidden-on-mobile"></span> Belépés</li>
<li><span class="glyphicon glyphicon-user hidden-on-mobile"></span> Regisztráció</li>
</ul>
</div>
Apply the border to a pseudo element of the a in the tag, positioned with position: absolute and use the left and right values to account for the padding on that element so the border aligns with the text.
.nav>li>a:after {
content: '';
border-bottom: 1px solid red;
position: absolute;
bottom: 0; left: 15px; right: 15px;
}
/* you don't need this - just for the demo */
.collapse {
display: block!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in hidden-on-mobile"></span> Belépés</li>
<li><span class="glyphicon glyphicon-user hidden-on-mobile"></span> Regisztráció</li>
</ul>
</div>
Related
I have this html to show my navigation:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav mainMenu">
<li><span class="glyphicon glyphicon-dashboard"></span><span class="menuText">Menu1</span></li>
<li><span class="glyphicon glyphicon-home"></span><span class="menuText">Menu2</span></li>
...
</ul>
</div>
My navigation looks like this:
Now I want to have the icon over the text but somehow it is not that simple that I thought.
Does someony have any idea how to do this in a simple way?
Add display:block to your spans so that they wrap to new lines.
Ex:
.glyphicon {
display: block;
}
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav mainMenu">
<li><span class="glyphicon glyphicon-dashboard">a</span><span class="menuText">Menu1</span></li>
<li><span class="glyphicon glyphicon-home">b</span><span class="menuText">Menu2</span></li>
...
</ul>
</div>
Ref
Try below code.
.collapse {
display: block !important;
}
.mainMenu li {
display: inline-block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav mainMenu">
<li><span class="glyphicon glyphicon-dashboard"></span><span class="menuText">Menu1</span></li>
<li><span class="glyphicon glyphicon-home"></span><span class="menuText">Menu2</span></li>
...
</ul>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-dashboard"></span><span class="menuText">Menu1</span></li>
<li><span class="glyphicon glyphicon-home"></span><span class="menuText">Menu2</span></li>
...
</ul>
</div>
I'm using Bootstrap 3.3.5 to display a footer at the bottom of webpages using the .navbar navbar-default class. On pages which are displaying a list of items greater than 10 the footer is being displayed correctly at the bottom of the page but on pages having less than 5 items then the footer is being displayed at the middle of the page instead of the bottom.
HTML code..
<nav class="navbar navbar-default" style="margin-bottom:0px;padding-botton:0px">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbarBottom">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbarBottom">
<ul class="nav navbar-nav navbar-center">
<li><span class="glyphicon glyphicon-th-large"></span> About</li>
<li><span class="glyphicon glyphicon-pencil"></span> Blog</li>
<li><span class="glyphicon glyphicon-road"></span> How It Works</li>
<li><span class="glyphicon glyphicon-certificate"></span> Credits</li>
<li><span class="glyphicon glyphicon-earphone"></span> Contact</li>
<li><span class="glyphicon glyphicon-comment"></span><b style="color:blue;"> Survey</b></li>
</ul>
</div>
</div>
</nav>
After changing the navbar class to "navbar navbar-default navbar-fixed-bottom" the footer is fixed to the bootom of the page but I'm not able to scroll down to the last item of the list. Please help..
Try this...
.navbar{
position:absolute;
bottom:0;
width:100%;
}
ok so if you want footer to stick on scroll
then
.navbar
{
position: fixed;
bottom: 0;
width: 100%;
}
and if you just want footer
.navbar
{
position: absolute;
bottom: 0;
width: 100%;
}
I want to make something like this
When I made 2 navbar, there is a white gap separating them, how to remove this gap?
I've read somewhere that if I change the size of the navbar's elements will automatically increase its height , but it didn't work out.
If I need to make a custom class for a navbar, what properties should I change?
edit :
<nav class ="navbar topNavbar">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login </li>
<li><span class="glyphicon glyphicon-user"></span> Sign Up </li>
</ul>
</div>
</nav>
<nav class="navbar botNavbar">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">Website name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Collections</li>
<li>About Us</li>
</ul>
</div>
</div>
</nav>
<style>
.topNavbar {
background-color: #F60;
}
.botNavbar {
background-color : #F90;
}
</style>
Bootstraps .navbar has a 20px bottom margin by default.
So you could do:
.topNavbar {
background-color: #F60;
margin-bottom: 0;
}
Bootply
I have the following nav bar
As you can see either side of the logo in the middle, there is a great deal of white space ideally I would like to space the navigation links out evenly so it would look something like this
I have achieved what is shown in the second picture by using padding-left and padding-right which to me seems a bit of a hack, I've googled looking for a potential solution for this but with no avail. this is my current html you can see the padding I have entered.
<nav 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-1">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
</button>
</div>
<a class="navbar-brand visible-lg visible-md hidden-sm hidden-xs"
style="background-image: url('/Content/Images/logo.png'); background-repeat: no-repeat; height: 94px; width: 301px; left: calc(50% - 148px); "
href='#Url.Action("Index", "Home")'></a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li id="lnkProducts">#Html.ActionLink("PRODUCTS", "Products", "Products")</li>
<li>FLAVOUR LAB</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li id="lnkVisitUs">VISIT US: <b>f</b></li>
<li id="lnkContactUs" class="visible-xs-block">#Html.ActionLink("CONTACT US", "Contact", "Contact") </li>
</ul>
</div>
</div>
</nav>
Thanks
** Update **
As requested please see below CSS for left and right nav bar
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
}
** Update **
This is whats shown when minimized to a mobile screen
I think you need to add width to your .navbar-left and .navbar-right to do this. and then add floats to the inner elements.
For example
<ul class="nav navbar-nav navbar-left" style="width:380px">
<li style="float:left" id="lnkProducts">#Html.ActionLink("PRODUCTS", "Products", "Products")</li>
<li>FLAVOUR LAB</li>
</ul>
UPDATE -
If giving width in PX to your navbar is not working in mobile you can use calc function in css to give the width. If the size of your middle icon is 301px*91px use following width for your left and right navbars
width: -webkit-calc(50% - 150px);
This may or may not be considered a hackish solution, depending on your need, but if you also need it to be responsive I'd probably go with table-display.
Yes, I know. But it keeps the layout clean and it works, at least until your logo's width is less than 20% of the container's width.
HTML:
<nav class="navbar navbar-default">
<div class="container">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
<div>link1</div>
<div>link2</div>
<div class="text-center">logo</div>
<div class="r">link3</div>
<div class="r">link4</div>
</divv>
</div>
</div>
</nav>
CSS:
.navbar-nav { display: table; }
.navbar-nav > div { display: table-cell; width: 20%; }
.navbar-nav > div.r { text-align: right; }
The other thing to manage with this approach is that you have to build another, separate menu for the fluid viewport and switch between the two depending on screen size.
We are designing a new website, and the designer has created the nav bar as follows, you can see the curve (this is what I'm trying to crack!)
Below is how my current header is
This is my current HTML, I also had to create a new CSS class for the brand so it would appear in the middle of the screen
<nav 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-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>
<a class="navbar-brand" href='#Url.Action("Index", "Home")'>LOGO HERE</a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>PRODUCTS</li>
<li>FLAVOUR LAB</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT US ON LIFE INVADER</li>
</ul>
</div>
</div>
</nav>
And the css is as follows
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
When I create a test image and try to apply the style i.e back ground image I get the following output, as you can see the logo with the curve half shows and appears to the left hand side of the screen.
The updated CSS
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
background-image: url('/Content/Images/TempLogoExample.png');
background-repeat: no-repeat;
z-index: 9999;
}
I've attached a test Image for anyone that feels they want to have a go at it, any solution/advice would be highly appreciated.
It appears on the left corner because you have set Left:0. try changing that using percentage mark. Eg:- left: 45%;will work in your case. if not try changing the percentage value.
I Recommend to go with a different markup approach to achieve this. Why can't you use columns grid in the main section and then bring your designs internally. Below markup will help you to acheive this.
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<div class="col-xs-4">
<ul class="nav navbar-nav navbar-left">
<li>PRODUCTS</li>
<li>FLAVOUR LAB</li>
</ul>
</div>
<div class="col-xs-4">
<a class="navbar-brand" href='#Url.Action("Index", "Home")'>LOGO HERE</a>
</div>
<div class="col-xs-4">
<ul class="nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT US ON LIFE INVADER</li>
</ul>
</div>
</div>