I am using bootstrap 4.1 and everything works fine until I add a media query for the navbar. I am assuming I did not add the drop down list in a media query but i am not sure whether it is the reason.
Navbar image for 1st ddl
Navbar image for 2nd ddl
I want the ddl to be like this
HTML
<nav class="navbar navbar-expand-custom bg-dark navbar-dark">
<a class="navbar-brand" href="landingPage(Stu).aspx">
Trip Management System
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTrips" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="margin: 0px 3px 0px 3px"></i>Trips
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuTrips">
<a class="dropdown-item" href="tripRegistration.aspx">Apply For Trip</a>
<a class="dropdown-item" href="viewtrips.aspx">View Trips</a>
<a class="dropdown-item" href="viewReviewList.aspx">List of Reviews</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="tripApplicationList.aspx"><i class="fab fa-wpforms" style="margin: 0px 3px 0px 3px"></i>Application Status</a>
</li>
<li class="nav-item">
<a class="nav-link" href="viewWeather.aspx"><i class="fas fa-sun" style="margin: 0px 3px 0px 3px"></i>Weather</a>
</li>
<li class="nav-item">
<a class="nav-link" href="viewAnnouncement.aspx"><i class="fas fa-bullhorn" style="margin: 0px 3px 0px 3px"></i>Announcements</a>
</li>
<li class="nav-item dropdown" style="position: absolute; right: 80px;">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<asp:Label ID="Labelusername" runat="server"></asp:Label>
</a><div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="EditProfileStudent.aspx">Edit Profile</a>
<a class="dropdown-item" href="profilePage.aspx">View Profile</a>
<a class="dropdown-item" href="calendar.aspx">Trip Calendar</a>
<a class="dropdown-item" href="viewTripHistory.aspx">View Trip History</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="signout.aspx">Sign out</a>
</div>
</li>
</ul>
</div>
</nav>
CSS
#media (min-width: 1380px) {
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex !important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
Snippet for live preview
#media (min-width: 1380px) {
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex !important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-custom bg-dark navbar-dark">
<a class="navbar-brand" href="landingPage(Stu).aspx">
Trip Management System
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTrips" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="margin: 0px 3px 0px 3px"></i>Trips
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuTrips">
<a class="dropdown-item" href="tripRegistration.aspx">Apply For Trip</a>
<a class="dropdown-item" href="viewtrips.aspx">View Trips</a>
<a class="dropdown-item" href="viewReviewList.aspx">List of Reviews</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="tripApplicationList.aspx"><i class="fab fa-wpforms" style="margin: 0px 3px 0px 3px"></i>Application Status</a>
</li>
<li class="nav-item">
<a class="nav-link" href="viewWeather.aspx"><i class="fas fa-sun" style="margin: 0px 3px 0px 3px"></i>Weather</a>
</li>
<li class="nav-item">
<a class="nav-link" href="viewAnnouncement.aspx"><i class="fas fa-bullhorn" style="margin: 0px 3px 0px 3px"></i>Announcements</a>
</li>
<li class="nav-item dropdown" style="position: absolute; right: 80px;">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<asp:Label ID="Labelusername" runat="server"></asp:Label>
</a><div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="EditProfileStudent.aspx">Edit Profile</a>
<a class="dropdown-item" href="profilePage.aspx">View Profile</a>
<a class="dropdown-item" href="calendar.aspx">Trip Calendar</a>
<a class="dropdown-item" href="viewTripHistory.aspx">View Trip History</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="signout.aspx">Sign out</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
Does anyone know how to solve this issue?
Thanks in advance.
use position:absolute for this class
.navbar-nav .dropdown-menu {
position: absolute !important;
float: none;
}
#media (min-width: 1380px) {
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex !important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
.navbar-nav .dropdown-menu {
position: absolute !important;
float: none;
}
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-custom bg-dark navbar-dark">
<a class="navbar-brand" href="landingPage(Stu).aspx">
Trip Management System
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTrips" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="margin: 0px 3px 0px 3px"></i>Trips
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuTrips">
<a class="dropdown-item" href="tripRegistration.aspx">Apply For Trip</a>
<a class="dropdown-item" href="viewtrips.aspx">View Trips</a>
<a class="dropdown-item" href="viewReviewList.aspx">List of Reviews</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="tripApplicationList.aspx"><i class="fab fa-wpforms" style="margin: 0px 3px 0px 3px"></i>Application Status</a>
</li>
<li class="nav-item">
<a class="nav-link" href="viewWeather.aspx"><i class="fas fa-sun" style="margin: 0px 3px 0px 3px"></i>Weather</a>
</li>
<li class="nav-item">
<a class="nav-link" href="viewAnnouncement.aspx"><i class="fas fa-bullhorn" style="margin: 0px 3px 0px 3px"></i>Announcements</a>
</li>
<li class="nav-item dropdown" style="position: absolute; right: 80px;">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<asp:Label ID="Labelusername" runat="server"></asp:Label>
</a><div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="EditProfileStudent.aspx">Edit Profile</a>
<a class="dropdown-item" href="profilePage.aspx">View Profile</a>
<a class="dropdown-item" href="calendar.aspx">Trip Calendar</a>
<a class="dropdown-item" href="viewTripHistory.aspx">View Trip History</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="signout.aspx">Sign out</a>
</div>
</li>
</ul>
</div>
</nav>
its happened because you are write wrong expand class navbar-expand-custom class doesn't exist in bootstrap 4 so it creates problem.
so i change navbar-expand-custom to navbar-expand-lg so whenever screen is smaller than 992px burger menu shows.
#media (min-width: 1380px) {
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex !important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<a class="navbar-brand" href="landingPage(Stu).aspx">
Trip Management System
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTrips" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="margin: 0px 3px 0px 3px"></i>Trips
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuTrips">
<a class="dropdown-item" href="tripRegistration.aspx">Apply For Trip</a>
<a class="dropdown-item" href="viewtrips.aspx">View Trips</a>
<a class="dropdown-item" href="viewReviewList.aspx">List of Reviews</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="tripApplicationList.aspx"><i class="fab fa-wpforms" style="margin: 0px 3px 0px 3px"></i>Application Status</a>
</li>
<li class="nav-item">
<a class="nav-link" href="viewWeather.aspx"><i class="fas fa-sun" style="margin: 0px 3px 0px 3px"></i>Weather</a>
</li>
<li class="nav-item">
<a class="nav-link" href="viewAnnouncement.aspx"><i class="fas fa-bullhorn" style="margin: 0px 3px 0px 3px"></i>Announcements</a>
</li>
<li class="nav-item dropdown" style="position: absolute; right: 80px;">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<asp:Label ID="Labelusername" runat="server"></asp:Label>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="EditProfileStudent.aspx">Edit Profile</a>
<a class="dropdown-item" href="profilePage.aspx">View Profile</a>
<a class="dropdown-item" href="calendar.aspx">Trip Calendar</a>
<a class="dropdown-item" href="viewTripHistory.aspx">View Trip History</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="signout.aspx">Sign out</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
Related
This is my html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<img class="logo" src="/images/logo.png" alt="">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
This is my css
/* Navbar */
.navbar {
width: 100%;
/* height: 45px; */
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.logo {
height: 30px;
}
I want the logo to be on the far left and the nav-items together on the far right , I was adding a justify content to the container but did not work , any idea on how to do this ?
You can assign class justify-content-end to the #navbarNavDropdown div.
I also added px-lg-5 after container-fluid as to show all text in dropdown menu.
/* Navbar */
.navbar {
width: 100%;
/* height: 45px; */
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.logo {
height: 30px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid px-lg-5">
<img class="logo" src="/images/logo.png" alt="">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
On the other hand, you are using Bootstrap-5 instead of Bootstrap-4.
I am working on navbar in bootstrap 4. I am experiencing issue when i hover on the nav links. I have added border bottom on hover for navlinks. But when the hover is made the entire navbar moves. I have pasted what i have done so far.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="#" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">First item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Second Item</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="my-2 my-lg-0">
</div>
</div>
</nav>
<style>
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
color: rgba(255, 255, 255, 0.75);
border-bottom: 2px solid #fff;
}
</style>
The reason it is shifting is because you have no border, and then all of a sudden a 2px border is added on hover. The way to fix this is by adding a 2px transparent border to the regular/unhovered state.
.navbar-dark .navbar-nav .nav-link {
border-bottom: 2px solid transparent;
}
(UPDATE: Resolved - i had to add the javascript in $(document).ready(function(), which i was missing. The below eg worked perfect for me.)
I am trying to make a Multi-Level Navbar work with Angular 6 & Bootstrap 4.
How do i expand and colapse sub-menu's on click or hover? I want the menu to expand to the right...
Eg: I found a solution on this link - but i am not sure how to inject Javascript in a Angular component.
https://codepen.io/surjithctly/pen/PJqKzQ
Here are my version details
+-- bootstrap#4.1.3
+-- jquery#3.3.1
+-- popper.js#1.14.4
Below is my Navbar Code
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#" style="color: red;">
My NAVBAR
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownHI" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownHI">
<li><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item dropdown"><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
</ul>
</li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">View All</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
You need to add custom styles along with the following html
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<div class="container">
<div class="row">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-item">Some action</li>
<li class="dropdown-item">Some other action</li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Even More..</a>
<ul class="dropdown-menu">
<li class="dropdown-item">3rd level</li>
<li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a>
<ul class="dropdown-menu">
<li class="dropdown-item">4th level</li>
<li class="dropdown-item">4th level</li>
<li class="dropdown-item">4th level</li>
</ul>
</li>
<li class="dropdown-item">3rd level</li>
</ul>
</li>
<li class="dropdown-item">Second level</li>
<li class="dropdown-item">Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I'm trying to make my navigation bar fixed top only when users visit the site when on mobile devices. so far I've tried to do this by using a media quires. it works when I use Google chrome feature "inspect" to view how my site looks on mobile, however when I upload the site and access it from an actual mobile device the navbar is no longer fixed at the top. link to the site
Update: The fixed navbar doesn't work at all in safari and is positioned in the wrong place in google chrome
<!--NAVIGATION BAR-->
<!DOCTYPE html>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
CSS
#media only screen and (max-width: 768px) {
.navbar {
position: fixed;
z-index: 1;
width: 100%;
}
}
#media only screen and (max-width: 768px) {
.carousel {
margin-top: 60px;
}
}
.navbar {
background-color: #2A2F35;
padding: 0 !important;
}
.navbar-nav a {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0.5px;
color: #ffffff !important;
padding: 25px 0px 25px 0px;
margin: 0px 15px 0px 15px;
}
use this as a reference
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
I just tested on my phone and the navbar seems to be fixed no problem. Maybe adding this meta tag will help you
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a navbar, and it works fine when there are only single-line items:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link profile" href="#">
<div class="profile-info">
<span class="name">Артём</span>
</div>
</a>
</li>
</ul>
</div>
But when item is multiline, the other items lose center vertical alignment and align top instead:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link profile" href="#">
<div class="profile-info">
<span class="name">Артём</span>
<span class="balance">31337 ₽</span>
</div>
</a>
</li>
</ul>
</div>
My SASS code:
#site-header {
background: #2d3840;
border-bottom: solid 1px #20272d;
height: 83px;
.navbar-brand {
color: white;
}
.nav-item {
&:not(:first-child) {
margin-left: 25px;
}
&:not(:last-child) {
margin-right: 25px;
}
// General link
a.nav-link {
color: white;
font-size: 16px;
text-align: center;
#include transition(0.5s);
&:hover {
#include transition(0.3s);
color: $color-accent;
}
&.active {
padding: 6px 21px 6px 21px;
background: $color-accent;
border-radius: 17.5px;
box-shadow: 0 2px 10px 0 rgba(90, 175, 238, 0.6);
&:hover {
color: white;
box-shadow: none;
}
}
// Profile
&.profile {
.profile-info {
display: inline-block;
.name {
display: block;
font-weight: bold;
}
.balance {
display: block;
font-size: 16px;
font-weight: bold;
color: $color-accent;
}
}
}
}
}
}
Desired:
So, how to center items when there are multi-line items?
Remove the profile-info and use these classes for the a tag.
d-flex - to make it flex
flex-column - to change its flex-direction property to column
text-right - to align its inline children on the right side of it
<li class="nav-item">
<a class="nav-link d-flex flex-column text-right" href="#">
<span class="name">Артём</span>
<span class="balance">31337 ₽</span>
</a>
</li>
To align the other items vertically in the center of the list, use align-self-center for each one of the li elements.
<li class="nav-item align-self-center">
<a class="nav-link" href="#">FAQ</a>
</li>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active align-self-center">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item ">
<a class="nav-link d-flex flex-column text-right" href="#">
<span class="name">Артём</span>
<span class="balance">31337 ₽</span>
</a>
</li>
</ul>
</div>
</nav>