I want to center my links on mobile view (md and down view) of my navbar but I can't seem to find a solution for it. I am using bootstrap v4-alpha
<div class="container-fluid p-b-3">
<nav class="navbar navbar-full navbar-fixed-top navbar-light bg-faded">
<ul class="nav navbar-nav">
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" data-toggle="modal" data-target="#myModal" style="cursor:pointer;">LINK 3</a>
</li>
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#kontakti">LINK 2</a>
</li>
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#produktet">LINK 1</a>
</li>
</ul>
</nav>
</div>
Here's the codepen link
You can achieve it using flexbox.
Here's a working pen I created: http://codepen.io/anon/pen/bwbpNx
CSS
.navbar-nav {
display: flex;
align-items: center;
justify-content: center;
}
I think this is one of the proper way to do it. So that, if you add another link. It will remain at center. Hope it helps. Cheers!
Use media query and override styles to make your links center aligned.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');
#media (max-width: 767px) {
.navbar ul {
text-align: center;
}
.navbar ul li {
display: inline-block;
vertical-align: top;
padding: 0 10px;
}
.navbar ul li a {
margin-left: 0 !important;
}
}
<div class="container-fluid p-b-3">
<nav class="navbar navbar-full navbar-fixed-top navbar-light bg-faded">
<ul class="nav navbar-nav">
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" data-toggle="modal" data-target="#myModal" style="cursor:pointer;">LINK 3</a>
</li>
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#kontakti">LINK 2</a>
</li>
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#produktet">LINK 1</a>
</li>
</ul>
</nav>
</div>
Related
I have a nav bar with dropdowns that appear when hovered over. That part works perfectly. However if you click on the parent or element the dropdown moves to the far left of the screen. I want it to just stay where it is even if this is clicked on. I'll include my html and css code below. Any help getting this element to stay where it is when the screen is expanded would be helpful. I am using bootstrap 5 by the way.
navbar.html
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<img class="navbar-logo" src="{% static 'site_base/images/image.png' %}" alt="Logo">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-end" id="main-navigation">
<ul class="navbar-nav ms-auto d-flex justify-content-end">
<li class="nav-item">
<p class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Dropdown 1</p>
<ul class="dropdown-menu text-end dropdown-menu">
<li class="dropdown-item">Sub-item-1</li>
<li class="dropdown-item">Sub-item-2</li>
<li class="dropdown-item">Sub-item-3</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Products</a>
<ul class="dropdown-menu text-end">
<li class="dropdown-item">Product 1</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Resources</a>
<ul class="dropdown-menu text-end">
<li class="dropdown-item">User Guides</li>
<li class="dropdown-item">Videos</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/company">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact-us">Contact Us</a>
</li>
</ul>
</div>
</nav>
style.css
#media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
display: none;
}
.navbar .nav-item:hover .nav-link {
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
}
}
/* ============ desktop view .end// ============ */
/* ============ small devices ============ */
#media (max-width: 991px) {
.dropdown-menu .dropdown-menu {
margin-left: 0.7rem;
margin-right: 0.7rem;
margin-bottom: 0.5rem;
}
}
This question already has answers here:
Bootstrap dropdown sub menu missing
(11 answers)
Closed 1 year ago.
I am looking for an explanation on how the CSS selectors work to make it so that the Sub Menu is only shown when the parent element for that Sub Menu is hovered over. To my understanding there is a pure CSS solution for this with the use of :hover and the CSS display property however I do not understand how to use the two together to make the sub menu do what I want it to do. I have a hunch that the .dropdown-menu class is overwriting the display:hidden within the CSS for the submenu.
I have tried adding in some CSS in the selector .navbar .nav-item .submenu { display: hidden; position: absolute; left:100%; top:35px;} to hide the Sub Menu in the navbar. Once the Sub Menu is hidden I should be able to just show it again by using :hover on the parent element but I am unsure which element that would be as I have tried a mix of CSS selectors with no avail.
Here is the code for the page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body style="">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" style="background-color: black;">
<div class="container-fluid">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> People </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href="#">Professional Institutions</a></li>
<li class="dropdown-submenu">
<li><a class="dropdown-item text-white" href="#">My New Drop Down</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item text-white" href="#">Sub Area 1</a></li>
<li><a class="dropdown-item text-white" href="#">Sub Area 2</a></li>
<li><a class="dropdown-item text-white" href="#">Sub Area 3</a></li>
</ul>
</li>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Products </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href=""> Actuation Systems</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Knowledge </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href=""> A S Knowledge</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Policy Deployment </a>
<ul class="dropdown-menu">
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Processes And Procedures </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href="#"> Quality Management System</a></li>
<li><a class="dropdown-item text-white" href="#"> Buissness Management System </a></li>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
</nav>
<style>
#media all and (min-width: 1200px) {
.nav-link {
font-size: 25px
}
.navbar .nav-item .dropdown-menu {
display: hidden;
font-size: 20px
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
background: rgba(66, 66, 66, 0.4)
}
.dropdown-menu>li:hover {
background-color: black
}
.dropdown-menu .dropdown-item:hover {
background-color: black;
}
.navbar .nav-item .submenu {
display: hidden;
position: absolute;
left: 100%;
top: 35px;
}
}
</style>
</body>
</html>
Here is the code again: https://jsfiddle.net/p0etz8jg/
How it works:
The collapse JavaScript plugin is used to show and hide content.
Buttons or anchors are used as triggers that are mapped to specific
elements you toggle. Collapsing an element will animate the height
from its current value to 0. Given how CSS handles animations, you
cannot use padding on a .collapse element. Instead, use the class as
an independent wrapping element.
Bootstrap Collapse
So trying to achieve responsive collapsible navigation with two rows, where first includes logo and language select and second row main links:
| |
| LOGO lang |
| link1 link2 link3 link4 |
jsfiddle snippet of progress so far
Cant get equal width for the main links, so that are distributed horizontally evenly on lg viewport and above. With the structure and classes am using links are stacked very tight.
Second row navigation:
<ul class="navbar-nav nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Categories
</a>
<div class="dropdown-menu">
<a class="dropdown-item">Cat 1</a>
<a class="dropdown-item">Cat 2</a>
<a class="dropdown-item">Cat 3</a>
<a class="dropdown-item">Cat 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
Any ideas how to override classes or other solution? Thanks!
Specify the initial size of your flex items (li) to match content by changing the flex-basis from 0 to auto -- you can enable in Bootstrap 4 by using the flex-fill class. Add it to your HTML:
<li class="nav-item flex-fill">
<a class="nav-link" href="#">Live Auction</a>
</li>
Or add the property in your CSS:
.nav-justified li.nav-item {
/* ... */
flex-basis: auto;
}
Fiddle example: https://jsfiddle.net/wcj1gzr5/1/
To distribute flex items with an effect like justify-content: space-between the width of the div and ul which contain the flex items should expand their width (giving available space to distribute flex items). To do this, set min-width: 100%; on both elements to have them fill their containing element and then use justify-content on the ul to control spacing & positioning.
Fiddle example: https://jsfiddle.net/wcj1gzr5/2/
You can do this by adding width:100% to .navbar-collapse, .nav-pills. Below is the snippet for the same
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/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>
<style>
.navbar-collapse,
.nav-pills {
width: 100% !important
}
header {
width: 100%;
background: #282828;
background-position-x: 0%;
background-position-y: 0%;
background-image: url("https://cdn.wallpapersafari.com/65/40/cJtjUm.jpg");
background-size: cover;
background-position: center;
}
/* center the logo */
.navbar {
justify-content: center;
}
/* in order to center the logo */
.navbar .navbar-toggler {
position: absolute;
right: 1rem;
top: 0.5rem;
}
/* center all navbar items */
.navbar-nav {
align-items: center;
}
/* since it's expanding at lg */
#media (min-width: 992px) {
/* in order to display in 2 rows */
.navbar-expand-lg {
flex-flow: column nowrap;
}
/* same logic as the navbar-toggler above */
.navbar-nav.upper-controls {
position: absolute;
right: 1rem;
top: 0.5rem;
font-size: 85%;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light">
<a href="#" class="navbar-brand">
CompanyLogo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav upper-controls">
<li class="nav-item">
<a class="nav-link" href="#">Language</a>
</li>
</ul>
<ul class="navbar-nav nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Categories
</a>
<div class="dropdown-menu">
<a class="dropdown-item">Cat 1</a>
<a class="dropdown-item">Cat 2</a>
<a class="dropdown-item">Cat 3</a>
<a class="dropdown-item">Cat 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
</body>
</html>
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 1 year ago.
I'm trying to get my nav links to float to the right of my navbar, but I can't get it to work. I've tried using the ".float-right", "float-xs-right", and "justify-content-end" bootstrap 4 class, along with using "float: right !important;" in my CSS file, and it still won't work.
Here is the HTML for the navbar of my website:
<div id="navbar" class="navbar navbar-fixed-top">
<div class="container">
<div class="row">
<div class="navbar-brand">
<img src="images/logo.png" width="88px">
Scervino Lawn Service
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
And here is the CSS:
#navbar {
box-shadow: 0px 0px 11px #000;
padding: 0;
}
#navbar .navbar-brand {
font-size: 1.6em;
font-weight: bold;
color: #9CCC58;
}
I'm relatively new to the Bootstrap 4 framework, so it's possible that I might just be making a dumb mistake, but hopefully someone can help me. :(
Bootstrap 5 (update 2021)
The Bootstrap 5 Navbar still uses flexbox, but the concept of right and left, have changed to start and end for new RTL support. Therefore, the class names have changed...
float-right --> float-end
float-left --> float-start
ml-* --> ms-*
pl-* --> ps-*
mr-* --> me-*
pr-* --> pe-*
BUT, remember floats don't work with flexbox. The best approach for right alignment in the Navbar is to use ms-auto (margin-left: auto) or justify-content-end.
See this question for details
Bootstrap 4
The original answer no longer works in Bootstrap 4, and it's not good practice to use Bootstrap's .row in the navbar component. The .row should only be used for grid columns.
Now that Bootstrap 4 is flexbox, one way to align navbar components is using the auto-margin utility classes, such as ml-auto which is a shortcut for CSS margin-left:auto. This can be used to push the nav to the right...
https://www.codeply.com/go/ZAGhCX5lpq
<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
<div class="container">
<div class="navbar-brand">
<img src=".." width="88px">
Scervino Lawn Service
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
Or the flexbox utils like justify-content-between can be used on the container inside the navbar...
<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
<div class="container justify-content-between">
<div class="navbar-brand">
<img src=".." width="88px">
Scervino Lawn Service
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
Just notice that in this case justify-content-between works because there are only 2 navbar components (navbar-brand and nav).
You can use .justify-content-between on the parent .row to move the flex children to the far edges of the row.
#navbar {
box-shadow: 0px 0px 11px #000;
padding: 0;
}
#navbar .navbar-brand {
font-size: 1.6em;
font-weight: bold;
color: #9CCC58;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar" class="navbar navbar-fixed-top">
<div class="container">
<div class="row justify-content-between">
<div class="navbar-brand">
<img src="images/logo.png" width="88px">
Scervino Lawn Service
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
I tried with Bootstrap 4.0.0 Alpha 6 and it works, here's the example: https://repl.it/JwMq/0
I just added this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>
And a extra </div>
I am having a hard time getting my navbar to center. I want the entire navbar to be at the bottom of the screen always, and the logo to be in the very middle, and then two buttons on either side of it, spanning to the edges of the screen.
And here is the code I currently have:
.navigation {
font-size: 40px;
font-family: Roboto-Light;
color: black;
}
<nav class="navbar">
<div class="container">
<div class="navbar-nav nav-justified">
<a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
<a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
<a class="navigation foleyLogo nav-item nav-link" href="#">
<img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:200px;" />
</a>
<a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
<a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
</div>
<!-- navbar-nav -->
</div>
<!-- Container -->
</nav>
<!-- Navbar -->
I was under the impression that with the new boostrap 4, using nav-justified or nav-fill would do the job for me, just like in the instructional videos
Bootstrap 4 has built in utilities you can use.
<div class="navbar-nav mx-auto">
...
</div>
The class mx-auto for example adds auto margin on the x-axis of the navbar-nav, which should center the items.
.navigation {
font-size: 15px;
font-family: Roboto-Light;
color: black;
}
.navbar-nav {
width: 100%;
display: flex;
justify-content: space-around;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-xl ">
<div class="container">
<div class="navbar-nav mx-auto">
<a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
<a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
<a class="navigation foleyLogo nav-item nav-link" href="#">
<img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:100px;" />
</a>
<a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
<a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
</div>
<!-- navbar-nav -->
</div>
<!-- Container -->
</nav>
Found the answer with some help from #Brian !
I added a {flex-grow: 3} to his solution, which helped with the spacing.
Then, I declared the size of the logo image and made it an inline-block element, and made the entire navbar-nav the same line-height as the picture.
Solution code is below: (Font-size and image-size are scaled to fit here)
.navigation {
font-size: 15px;
font-family: Roboto-Light;
color: black;
}
.navbar-nav {
width: 100%;
display: flex;
justify-content: space-around;
}
.navbar-nav a:nth-of-type(1) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(2) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(3) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(4) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(5) {
flex-grow: 3;
}
img.foleyPerformance {
display: inline-block;
width: 100px;
}
.navbar-nav .nav-link {
padding-top: 0;
padding-bottom: 0;
height: 100px;
line-height: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-toggleable-xl">
<div class="container" style="margin-left:50px; margin-right:50px; width:100%;">
<div class="navbar-nav mx-auto">
<a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
<a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
<a class="navigation foleyLogo nav-item nav-link" href="#">
<img class="foleyPerformance" src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" />
</a>
<a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
<a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
</div>
<!-- navbar-nav -->
</div>
<!-- Container -->
</nav>
<!-- Navbar -->