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 -->
Related
Nav Bar Layout sorry for my bad English. I am trying to add a bit space after logo so that logo stays on the left corner and the first nav links pushed on the left side not totally left but a bit more to the right.
I copied the exact same HTML and CSS code.
<nav class="nav navbar-default navbar">
<div class="container">
<div class="nav-header ">
<a class="navbar-brand"><img src="C:\Users\usama\Downloads\logo.jpg" alt=""></a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="navbarp"><i class="active fa fa-book fa-xs"></i><br><p></p>About</li>
<li class="navbarp"><i class="fal fa-registered"></i><br><p></p>Admissions</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navbarp"><i class="fas fa-user-plus"></i><br><p></p>sign up</li>
<li class="navbarp"><i class="fas fa-sign-in-alt"></i><br><p></p>login</li>
</ul>
</div>
</div>
</div>
Try this (padding is added to the right of the logo):
<a class="navbar-brand" style="padding-right:15px">
<img src="C:\Users\usama\Downloads\logo.jpg" alt="" />
</a>
Or (padding is added to the left of the nav bar):
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-left:15px">
Also, check your <li> tags. You currently have:
<li class="navbarp"><i class="active fa fa-book fa-xs"></i><br><p></p>About</li>
Note how the heading "about" is outside of the <p></p> tags.
I suspect you'd want it to be formatted it this way:
<li class="navbarp"><i class="active fa fa-book fa-xs"></i><p>About</p></li>
With the word being correctly in the <p></p> tag, you might not need the <br>
When you view the page as mobile the main navigation bar does not show the drop downs properly underneath their respected parent link. I have search and cannot seem to find a solution. Currently the dropdown menus show under and to the left of the main link. You can see a live demonstration at http://beta.lofbc.org
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" 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 hidden-lg hidden-md hidden-sm" href="#">Life of Faith Bible Church</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav nav-justified">
<li>#Html.ActionLink("HOME", "index", "Home")</li>
<li role="presentation" class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Church Services", "ChurchServices", "About")</li>
<li>#Html.ActionLink("What to Expect", "WhatToExpect", "About")</li>
<li>#Html.ActionLink("What we Believe", "whatwebelieve", "About")</li>
<li>#Html.ActionLink("Leadership", "Leadership", "About")</li>
</ul>
</li>
<li role="presentation" class="dropdown">
MINISTRIES <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Children", "Children", "Ministries")</li>
<li>FAA</li>
<li>God's Girlz Club</li>
<li>AfterShock Youth</li>
<li>Young Adults</li>
<li>Men of Impact</li>
<li>Women</li>
<li>God's Golden Girls</li>
<li>The Great Giveaway</li>
</ul>
</li>
<li>#Html.ActionLink("EVENTS", "", "Events")</li>
<li role="presentation" class="dropdown">
MEDIA <span class="caret"></span>
<ul class="dropdown-menu">
<li>Live Stream</li>
<li>#Html.ActionLink("Service Archives", "ServiceArchives", "Media")</li>
<li>TV Broadcast</li>
<li>Photo Album</li>
</ul>
</li>
<li>STORE</li>
<li role="presentation" class="dropdown">
CONTACT <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Send us a Message", "index", "contactus") </li>
<li>Submit Testimony</li>
<li>Prayer Request</li>
<li>#Html.ActionLink("Give", "Donate", "Giving")</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
This is happening because your nested <ul> tags are absolutely positioned. An absolutely positioned element cannot move relatively positioned elements so even if you moved it across it will simply appear on top of your existing buttons.
My fix would be to apply the following css to the nested <ul> tags:
#media (max-width: 767px) {
.nav-justified>.dropdown .dropdown-menu {
position: relative;
width: 100%;
background-color: #1c5168;
}
.nav-justified>.dropdown .dropdown-menu li {
color: lightblue;
text-align: center;
}
}
Placing it inside a media query will stop the css from applying to your menu on desktop layouts.
You will still have to add more styling to get the menu to look nice but this will fix your positioning issue.
Just for reference here is a good article about the position property with examples of how it works: https://css-tricks.com/almanac/properties/p/position/
I'm using Bootstrap.
I have links that are outside of the Navbar.
</nav>
<ul>
<li>Outside Link</li>
<li>Outside Link</li>
<li>Outside Link</li>
<li>Outside Link</li>
<ul>
I also have the same links inside the Navbar, but with a "visible-xs" class attached, so that they only appear inside the Mobile Navbar. (with hamburger toggle icon menu)
<ul class="visible-xs">
<li>Outside Link</li>
<li>Outside Link</li>
<li>Outside Link</li>
<li>Outside Link</li>
<ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My current code works the way I would like, however, I do not want to write out the HTML links twice.
http://codepen.io/Goatsy/pen/yJeqjz
How do I place the outside links, inside ONLY the Mobile Navbar, without having to write the links twice in the HTML?
Ultimately, I would like these "outside links" to show on Desktop, outside of the navbar.
For Mobile, they will be, essentially, "moved" inside the navbar.
You can do this with CSS and the right HTML structure. Seperate your outside links from your standard links using navbar-right, then use position: absolute inside a media query so they are only out of the navbar above 767px.
#media (min-width: 767px) {
.navbar.navbar-default .ul-outside {
position: absolute;
top: 100%;
left: 0;
}
}
Working Example I
/*FOR DEMO ONLY*/
.navbar.navbar-default {
margin-bottom: 0;
}
/*FOR DEMO ONLY*/
#media (min-width: 767px) {
.navbar.navbar-default .ul-outside {
position: absolute;
top: 100%;
left: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
<ul class="nav navbar-nav navbar-right ul-outside">
<li>Outside
</li>
<li>Outside
</li>
<li>Outside
</li>
<li>Outside
</li>
</ul>
</div>
</div>
</nav>
<!--DEMO CONTENT-->
<div class="jumbotron">
<div class="container">
<h1>
Outer Links
</h1>
</div>
</div>
<!--DEMO CONTENT-->
Working Example II:
/*FOR DEMO ONLY*/
.navbar.navbar-default {
margin-bottom: 0;
}
/*FOR DEMO ONLY*/
#media (min-width: 767px) {
.navbar.navbar-default .ul-outside {
position: absolute;
width: 100%;
top: 100%;
left: 0;
}
.navbar.navbar-default .ul-outside > li {
float: none;
}
}
<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.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
<ul class="nav navbar-nav navbar-right ul-outside">
<li>Outside
</li>
<li>Outside
</li>
<li>Outside
</li>
<li>Outside
</li>
</ul>
</div>
</div>
</nav>
<!--DEMO CONTENT-->
<div class="jumbotron">
<div class="container">
<h1>
Outer Links
</h1>
</div>
</div>
<!--DEMO CONTENT-->
Using Bootstrap to create a menu bar. My brand label is aligned far left. The main menu options are center aligned. I'm trying to get 'Logout' to be right aligned. But instead, its on a second line and centered.
<style>
body {
background-color: White;
margin-left: 40px;
margin-right: 40px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar .navbar-right {
text-align: right;
display: inline-block;
float: none;
vertical-align: top;
}
</style>
<body id=<?php echo $bodyid ?>>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">Assessment Manager</a>
</div>
<div class="collapse navbar-collapse">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Clients</li>
<li>Contacts</li>
<li>Employees</li>
<li>Findings</li>
<li>Projects</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vulnerabilities<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Host</li>
<li>Web</li>
</ul>
</li>
</ul>
</div>
<div class="container">
<ul class="nav navbar-nav">
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div>
</div>
See a picture of the menu bar here.
Put your <ul> elements in the same container. Also you have a CSS class navbar-right that wasn't used in your HTML. This HTML seems to work fine given a wide enough browser window:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">Assessment Manager</a>
</div>
<div class="collapse navbar-collapse">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Clients</li>
<li>Contacts</li>
<li>Employees</li>
<li>Findings</li>
<li>Projects</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vulnerabilities<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Host</li>
<li>Web</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div>
</div>
</div>
You could also experiment with float:right; on the <ul> for your login link (using the same navbar-right class.
Also, keep in mind that bootstrap intends for the container class to have row and col classes inside it to further wrap the content. By using only container you're missing out on a lot of the responsive behavior bootstrap is intended to provide.
I have created a navabar with bootstrap 3. But the problem is that a weird border appears in my menu and the menu items don't take the full height of the navbar.
This is the code:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="/" title="www.site.com">
<img src="/img/logo.png" alt="site.com"/>
</a>
<div class="navbar navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Link 1</li>
<li>Link 2</li>
</ul> <!-- end nav-->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<strong class="caret"></strong> Select language
<ul class="dropdown-menu dropdown-menu-right">
<li>NL</li>
<li>IL</li>
<li>ENG</li>
</ul>
</li>
</ul> <!-- end nav menu right -->
</div> <!-- end nav-collapse -->
</div> <!-- end container -->
</div> <!-- end navbar -->
I have added a sample over here: http://jsfiddle.net/yn9C6/
Where does this line come from?
Add the following styles in your CSS. It will override the default bootstrap style so that you won't get extra padding and unnecessary border.
.navbar-default .navbar-collapse, .navbar-default .navbar-form
{
border-color:transparent !important;
}
.navbar
{
margin-bottom:0px !important;
}
Create a css class to override those.
.test{
border-color:transparent;
margin-bottom:0px;
}
And add the class on div and ul.