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>
Related
How to set last <li> element in navbar to the right?
Here is the code:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Rozwiń nawigację</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"> STRONA GŁÓWNA</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Panele podłogowe</li>
<li class="divider"></li>
<li>Wkręty i impregnaty</li>
<li> <a href="test.pdf" download="Katalog produktów Drew-Holz"> KATALOG PRODUKTÓW
<i class="fa fa-file-pdf-o" style="font-size:20px;color:#FF0000"> </i></a></li>
</ul>
</div><!-- /.navbar-collapse -->
CSS pseudo element :last-of-type will (amazingly) only effect the last of that type of element.
ul li:last-of-type {
text-align:right;
}
#<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Panele podłogowe</li>
<li class="divider"></li>
<li>Wkręty i impregnaty</li>
<li> <a href="test.pdf" download="Katalog produktów Drew-Holz"> KATALOG PRODUKTÓW
<i class="fa fa-file-pdf-o" style="font-size:20px;color:#FF0000"> </i></a></li>
</ul>
</div><!-- /.navbar-collapse -->
OR, if you only wish the inner content to be moved to the right rather than the bullet point itself you can do this:
Because all the contents of your <li> is wrapped in an anchor tag, you can style that anchor tag to do what you need.
ul li:last-of-type > a {
display: block;
text-align:right;
}
#<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Panele podłogowe</li>
<li class="divider"></li>
<li>Wkręty i impregnaty</li>
<li><a href="test.pdf" download="Katalog produktów Drew-Holz"> KATALOG PRODUKTÓW
<i class="fa fa-file-pdf-o" style="font-size:20px;color:#FF0000"> </i></a></li>
</ul>
</div><!-- /.navbar-collapse -->
`Like you said you wanted to set the last <li> item to right.
What i have done here is i made a parent class named .sticky and i put inside the <li> elements. I set .sticky to displa:flex and justify-content: flex-end; so all <li> elemts will be set to the end of the page.
and last part, i did li:last-child so i selected the 3rd <li> element and set it to margin-left: auto;.as you can see the results. Goal is achived.
Hope you found your answer.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.sticky {
display: flex;
justify-content: flex-end;
}
li:last-child {
margin-left: auto;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="body">
<div class="sticky">
<li>1</li>
<li>2</li>
<li>3</li>
</div>
</div>
</body>
</html>
You can set margin-left: auto; to the last element. There is a bootstrap utility class class="ml-auto". This will push the element to the right.
For example,
<li class="ml-auto"></li>
Here is an alternative way to address the last child element of something specific. In this case it selects the first child element of its parent counted from the last one.
ul li:nth-last-child(1) {
text-align:right;
}
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Panele podłogowe</li>
<li class="divider"></li>
<li>Wkręty i impregnaty</li>
<li> <a href="test.pdf" download="Katalog produktów Drew-Holz"> KATALOG PRODUKTÓW
<i class="fa fa-file-pdf-o" style="font-size:20px;color:#FF0000"> </i></a></li>
</ul>
</div><!-- /.navbar-collapse -->
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>
So I have bootstrap navbar which is fixed and have body padding-top: 50px;
so far so good but the bootstrap.js and .css files make clicked li background color to be white and i want it to be black i guess the default is white.So i tried to manually change background-color property of the .active class
HTML:
<header>
<nav class="navbar navbar-fixed-top">
<div class="container">
<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 id="logo-img" src="images/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><span class="glyphicon glyphicon-search"></span> Search</li>
<li><span class="glyphicon glyphicon-home"></span> Sales</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="fa fa-cogs"></span> Services</li>
<li><span class="glyphicon glyphicon-comment"></span> Contact</li>
<li><span class="glyphicon glyphicon-link"></span> About Us</li>
</ul>
</div>
</div>
</nav>
</header>
in custom CSS i have but nothing happens it does not change from white to black:
.active {
background-color: black !important;
}
Just changing the background of the .active class will not work
try the following:
ul.nav a:hover, ul.nav a:focus, ul.nav a:active { color: #000; }
I don't thing !important will be necessairy
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
So I have a bootstrap navbar, and I have been previously selecting the links with a span class of "nav-text". This is working for the font-size and color, but when I try applying a margin or padding I can not get a response. I have tried selecting the links for positioning in many, many different ways now so I've turned here.
Here is the html:
<ul class="nav navbar-nav navbar-right">
<li><span class="nav-text">Physicians</span></li>
<li><span class="nav-text">Directions</span></li>
<li><span class="nav-text">Services</span></li>
<li><span class="nav-text">FAQ</span></li>
<li><span class="nav-text">Privacy</span></li>
<li><span class="nav-text">Health Links</span></li>
<li><span class="nav-text">Office Policy</span></li>
<li><span class="nav-text" id="view">W***** Login</span></li>
</ul>
So how would I give the .nav-text links proper positioning? I was succesful in giving the #view id link a padding left. But the padding top doesn't work for that either?
Here is the entire navbar if you need it (bootstrap)
<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-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="index.php"><img src="#" id="logo"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><span class="nav-text">Physicians</span></li>
<li><span class="nav-text">Directions</span></li>
<li><span class="nav-text">Services</span></li>
<li><span class="nav-text">FAQ</span></li>
<li><span class="nav-text">Privacy</span></li>
<li><span class="nav-text">Health Links</span></li>
<li><span class="nav-text">Office Policy</span></li>
<li><span class="nav-text" id="webview">Webview Login</span></li>
</ul>
</div>
</div>
</nav>
</header>
Fiddle
To add padding/margin to your links use:
.nav li a {
padding: 45px;
margin-right: 20px;
}
For example.
Your updated jsFiddle