I haven't been working on code for ages and I'm facing an issue that is getting me crazy cause I can't even start doing anything. I'm working on the very base of my website and when I try my page the navbar automatically goes on Mobile mode while I'm on desktop.
I tried on Chrome and Firefox with the same results : a shrinked navbar on full-size page (it's not even working correctly as it's not the good size). Reducing the window's size will make the mobile navbar work correctly but impossible to get a normal one.
I've tried different styles of navbar from Codepen to see if my code was wrong but same problem. I even tried using Bootstrap 3 instead of 4 and the code gets even worst.
This one for example is wrong : https://codepen.io/mmgolden/pen/JNewdL
HTML Head :
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="assets/js/jquery-3.4.1.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
HTML Body :
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarMobile" aria-controls="navbarMobile" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-left">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto" href="#"><div id="logo"></div></a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<!-- Mobile -->
<div class="collapse" id="navbarMobile">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mobile Link</a>
</li>
</ul>
</div>
</nav>
<div class="slider">
</div>
</body>
CSS :
.slider {
background: #333;
height: 400px;
width: 100%;
}
#logo {
background: #ccc;
width: 150px;
height: 70px;
}
.navbar-toggler {
margin-top: 15px;
}
#media screen and (min-width: 992px) {
.navbar {
height: 130px;
}
#logo {
width: 260px;
height: 120px;
position: relative;
bottom: -20px;
}
.navbar-light .navbar-nav .nav-link {
padding-right: 75px;
}
#nav-left {
padding-left: 30px;
}
}
Screenshot : https://ibb.co/KDFqfTH
I need it it show up normally on desktop and shrink on mobile/tablet.
Thanks for your time.
Related
I have 2 menus on the web page one needs to show at the center bottom and another one on the top right. This following code shows all of them in the same line.
Here is the layout I am trying to achieve.
**********************************************************************************
Home About User Login
Logo Heading
Link1 Link2 Link3 Link4 Link5
**********************************************************************************
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<style>
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
vertical-align: bottom;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active" ID="link1" runat="server" >
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server" >
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server" >
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server" >
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server" >
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
You're super close! An mx-auto and mt-auto on the bottom-center menu and an mb-auto on the top-right menu are all you need to get it working.
NOTE: This does break on smaller screens as we're still treating everything as columns and columns do wrap. But, you could absolutely position the top-right menu if you need to on smaller screens.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<style>
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav>li>a {
padding: 0;
margin: 0;
vertical-align: bottom;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png">Heading
</a>
<ul class="navbar-nav mx-auto mt-auto">
<li class="nav-item active" ID="link1" runat="server">
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server">
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server">
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server">
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mb-auto">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<asp:Label ID="LogOnUser" runat="server"></asp:Label>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Try this code. hope will help you.
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
vertical-align: bottom;
}
.bottom_menu{
margin-top: 30px;
}
.top_menu{
margin-bottom: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded justify-content-md-center">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="bottom_menu navbar-nav ml-auto text-md-center">
<li class="nav-item active" ID="link1" runat="server" >
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server" >
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server" >
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server" >
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server" >
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="top_menu navbar-nav ml-auto justify-content-md-center justify-content-start flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
You mean Like This?
<style>
#header{
position: relative;
width: 100%;
height: 100px;
background-color: orange;
}
a{
display: inline-block;
width: 50px;
}
#logo, #navigation, #url{
position: absolute;
}
#logo{
top: calc(50%);
}
#navigation{
top: 0;
right: 0;
}
#url{
left: calc(50% - 125px);
bottom: 0;
}
</style>
<div id = "header">
<div id = "logo">
LOGO
</div>
<div id = "navigation">
<a>Home</a>
<a>About</a>
<a>User</a>
</div>
<div id = "url">
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<a>Link4</a>
<a>Link5</a>
</div>
</div>
I'm trying to put a hover effect targeting the a-links in the navigation bar only (not the forwardslashes).
But I can't seem to access only the a-links, the effect ends up running along the whole navbar instead.
Seems to be a conflict with Bootstrap 4 here.
HTML
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">
<!-- <div class="mx-auto d-sm-flex d-block flex-sm-nowrap"> -->
<a class="navbar-brand" href="https://www.facebook.com/GetMove.Official/">GET MOVE</a>
<button
class="navbar-toggler mr-left custom-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span> / </span><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#past-bookings">Archive<span> / </span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About<span> / </span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#subscribe">Newsletter<span> / </span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto: hola#getmove.net">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav flex-row justify-content-center flex-nowrap">
<li class="nav-item">
<a
class="nav-link nav-social-icon"
target="_blank"
href="https://www.facebook.com/GetMove.Official/"
><i class="fab fa-facebook-square"></i
></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
><i class="fab fa-instagram"></i
></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"
><i class="fab fa-soundcloud"></i
></a>
</li>
</ul>
</div>
</nav>
CSS
.nav-item:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.nav-item:hover:after {
width: 100%;
}
Fiddle here
https://codepen.io/pen/WNNPdxv
To solve this issue you should not put separators inside the anchor elements.
Below is an approach which eliminates the extra HTML using the content property.
This is similar to Bootstrap's breadcrumb.
But as you're already familiar, first some cleanup ^^
remove the span separators from nav-links
use the span for text nodes (could be handy to put the animation on there)
move the animation from :after to :before (a separator is logically after an element, except for the last-child perhaps, this also gives you the elements width where you can now control the right position.)
use the :after for the separator
provide full width for the main navigation and use flexbox to align the space it's using (flex-end, center, space-between, ...)
HTML changes
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav navbar-primary w-100 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
<span>Home</span>
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#past-bookings"><span>Archive</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span>About</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#subscribe"><span>Newsletter</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto: hola#getmove.net"><span>Contact</span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-secondary flex-row justify-content-center flex-nowrap">
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://www.facebook.com/GetMove.Official/"><i class="fa fa-facebook-square"></i></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"><i class="fa fa-soundcloud"></i></a>
</li>
</ul>
</div>
Solution
Now to solve the issue, place the animation on before and separator on the after pseudo elements.
.navbar-primary .nav-item:after {
content: "/";
position: absolute;
top: 0.25rem;
left: auto;
right: -0.5rem; /* control the amount of space for the separator */
}
.navbar-primary .nav-item:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.navbar-primary .nav-item:hover:before {
width: 100%;
}
In case you want to change the character, you have only one editing place.
DEMO
In case you want to change the animation without the padding I'd suggest to distract the nav-link padding using calc().
.navbar-primary .nav-link:before {
content: "";
position: absolute;
bottom: 0;
left: 0.5rem; /* nav-link padding-left */
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.navbar-primary .nav-link:hover:before {
width: calc(100% - 1rem); /* minus nav-link padding left and right */
}
DEMO
You should put the hover on the a-link, and then a-link position:relative, or put the class position-relative to the a-link.
.nav-item a {
position: relative;
}
.nav-item a:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.nav-item a:hover:after {
width: 100%;
}
How do I center my navigation links with bootstrap and CSS with 2 links on the far right. I will replace these 2 links with buttons and graphics later.
Here is a link to how it currently looks. The main navigation needs to be centered and the 2 links far right. http://www.woodenpalette.com/index2.html
This is what I have so far:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<ul class="navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="drawings.html">Drawings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="eBook.html">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="learn_how_to_draw.html">Learn</a>
</li>
<li class="nav-item">
<a class="nav-link" href="drawing_workshops.html">Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
<ul class="nav justify-content-end">
<a class="nav-link" href="contact.php">Login</a> |
<a class="nav-link" href="contact.php">Register</a>
</ul>
</nav>
.navbar {
clear: both;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.navbar ul{
text-align: center;
float: right;
margin: auto;
overflow: hidden;
}
Here is the correction:
<nav class="navbar navbar-default">
<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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav fix-center">
<li class="active">Home</li>
<li>Drawings</li>
<li>Book</li>
<li>Learn</li>
<li>Workshop</li>
</ul>
<ul class="nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign
Up</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a>
</li>
</ul>
</div>
</div>
.fix-center{
display:block;
margin:0 auto;
text-align:center;
}
.nav li{
display:inline-block;
}
.navbar-right{
position:absolute;
right:0;
top:0;
}
Bootstrap 4 Alpha 6
I cant seem to figure out how to get both the right links and left link to both collapse. Right now only the right hand side link collapses.
<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
Menu
</button>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto" href="#">NavBar</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
You should wrap both the menus ul in one navbar-collapse div. Toggle Menu button will only target one collapse div not multiple. As earlier there were two navbar-collapse.
Here is code you should use.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
Menu
</button>
<a class="navbar-brand mx-auto" href="#">NavBar</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
Currently in alpha 6, the collapse only supports a single target..
Update Bootstrap 4.1
You can absolute position the brand on larger screens, and use a single collapse for the 2 navbars.
#media (min-width: 768px) {
.navbar-brand
{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
http://www.codeply.com/go/Sh05HDqIh1
Also see:
Center an element in Bootstrap 4 Navbar
How to center nav-items in Bootstrap?
<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
Menu
</button>
<a class="navbar-brand mx-auto" href="#">NavBar</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
The code posted by ZimSystem will overlap the menu items due to having 100% width and might clash with click events etc. A better option would be to use left instead of width.
.navbar-brand
{
display: block;
left: 50%;
position: absolute;
text-align: center;
}
I have a site that I've created with Bootstrap. At the top of my site, I have two rows for navigation. The code for those rows looks like this:
<nav class="navbar navbar-dark bg-info horizontal-nav">
<ul class="nav navbar-nav list-inline">
<li>home</li>
<li class="selected">about</li>
<li>contact</li>
</ul>
</nav>
<nav class="navbar horizontal-nav navbar-light bg-faded">
<ul class="nav navbar-nav list-inline">
<li>intro</li>
<li>service</li>
</ul>
</nav>
When this renders, it looks something like this:
+---------------------------------------+
| home about contact |
+---------------------------------------+
| intro service |
+---------------------------------------+
I'm trying to show a triangle for a selected item. So that way the user knows where they are at. In essence, I'm trying to do something like this:
+---------------------------------------+
| home about contact |
+----------^----------------------------+
| intro service |
+------------^--------------------------+
How do I do that with CSS / Bootstrap? Thank you!
Use content after to create the shape and then add it to the active Bootstrap state. See example.
.navbar.navbar-dark,
.navbar.navbar-light {
height: 60px;
}
nav.navbar .navbar-nav li.nav-item.active:after {
content: "";
position: relative;
margin-left: -15px;
left: 50%;
top: -20px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<nav class="navbar navbar-dark bg-info">
<ul class="nav navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
</div>
<hr>
<div class="container">
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Intro <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#">Services</a>
</li>
</ul>
</nav>
</div>