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">
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;
}
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>
I'm using Twitter Boostrap 4 and have a navbar with 2 menus :
one menu for the general navigation
one menu for the account
On small devices, no problem : the two togglers are displaying correctly
On large devices, i want to show only the general navigation and not the account navigation. My problem : the account navivation is showing and i don't know how to hide it on large devices ?
<!-- logo -->
<a class="navbar-brand" href="#" class="d-inline-block align-top">
<img src="https://www.n9ws.com/images/upload/google-220118055200.png" />
</a>
<span class="d-none d-sm-inline" style="font-size:17px;text-shadow: 0.15em 0.15em #333;display:inline;color:white"><strong>Calendrier</strong> collaboratif des <strong>stages d'Aïkido</strong> en <strong>France</strong></span>
<!-- global menu toggle -->
<button class="navbar-toggler order-first" 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>
<!-- account toggle -->
<button class="navbar-toggler" style="padding: 0.55rem 0.70rem;" type="button" data-toggle="collapse" data-target="#navbarMonCompte" aria-controls="navbarMonCompte" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-user"></i>
</button>
<!-- account -->
<div class="collapse navbar-collapse justify-content-end" id="navbarMonCompte">
<ul class="navbar-nav float-right text-right">
<li class="nav-item ">
<a class="nav-link" href="#">Change email</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Change password</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Disconnect</a>
</li>
</ul>
</div>
<!-- gloab menu -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link <?php echo ($this->menuSelected == 'accueil') ? 'active' : '';?>" href="/index2/index/">Accueil <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link <?php echo ($this->menuSelected == 'calendrier') ? 'active' : '';?>" href="/calendrier2/calendrier/">Calendrier</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Enseignants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Vidéos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Comptes-rendus</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">
A propos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Change email</a>
<a class="dropdown-item" href="#">Change password</a>
<a class="dropdown-item" href="#">Disconnect</a>
</div>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<button type="button" class="btn btn-sm my-2 my-sm-0 btn-primary" data-toggle="modal" data-target="#my-modal-connexion">
Connexion
</button>
</div>
</div>
Have you got an idea ?
Thank you.
Eric
Target the navbar you want to hide by its id and give it a style of display:none to hide it on bigger devices i.e. min-width: 992px.
For eg: If you want to hide navbarMonCompte. The css will be as shown below.
#media only screen and (min-width: 992px) {
#navbarMonCompte {
display: none !important;
}
}
EDIT - To answer OP's new question in comments
On small devices, if i click on the 'account toggler" then on the 'global menu toggler', the 2 dropdown are shown. Is it possible to hide the other dropdow when a dropdown is shown ?
$('button[data-target=my-modal-connexion]').click(function() {
if($('#navbarSupportedContent').hasClass('show'))
$('#navbarSupportedContent').removeClass('show');
});
The above-given jQuery will check if the navbar is open or not when the account toggler is clicked. If it is open, it will be closed.
Try adding a hide-account class to the account button and put this into your css.
#media only screen and (min-width: 992px) {
.hide-account {
display: none;
}}
jsfiddle: https://jsfiddle.net/sfto2qhw/1/
You need to add d-block d-md-none to your account Toggler button you can use d-sm-none or d-lg-none instead of d-md-none as per your breakpoint
<!-- logo -->
<a class="navbar-brand" href="#" class="d-inline-block align-top">
<img src="https://www.n9ws.com/images/upload/google-220118055200.png" />
</a>
<span class="d-none d-sm-inline" style="font-size:17px;text-shadow: 0.15em 0.15em #333;display:inline;color:white"><strong>Calendrier</strong> collaboratif des <strong>stages d'Aïkido</strong> en <strong>France</strong></span>
<!-- global menu toggle -->
<button class="navbar-toggler order-first" 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>
<!-- account toggle -->
<button class="navbar-toggler d-block d-md-none" style="padding: 0.55rem 0.70rem;" type="button" data-toggle="collapse" data-target="#navbarMonCompte" aria-controls="navbarMonCompte" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-user"></i>
</button>
<!-- account -->
<div class="collapse navbar-collapse justify-content-end" id="navbarMonCompte">
<ul class="navbar-nav float-right text-right">
<li class="nav-item ">
<a class="nav-link" href="#">Change email</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Change password</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Disconnect</a>
</li>
</ul>
</div>
<!-- gloab menu -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link <?php echo ($this->menuSelected == 'accueil') ? 'active' : '';?>" href="/index2/index/">Accueil <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link <?php echo ($this->menuSelected == 'calendrier') ? 'active' : '';?>" href="/calendrier2/calendrier/">Calendrier</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Enseignants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Vidéos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Comptes-rendus</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">
A propos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Change email</a>
<a class="dropdown-item" href="#">Change password</a>
<a class="dropdown-item" href="#">Disconnect</a>
</div>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<button type="button" class="btn btn-sm my-2 my-sm-0 btn-primary" data-toggle="modal" data-target="#my-modal-connexion">
Connexion
</button>
</div>
</div>
How to change background colour of opened bootstrap dropdown option. Here is the code:
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar6">
<span class="navbar-toggler-icon"></span>
</button>
Title
<div class="navbar-collapse collapse justify-content-stretch" id="navbar6">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About<span class="sr-only">Home</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Design</a>
<a class="dropdown-item" href="#">Development</a>
<a class="dropdown-item" href="#">Consulting</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
In bootstrap 3 I changed it with the help of:
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
background: #080808;
}
It was a standard code of bootstrap 3 (not work in bootstrap4)
how do I do the same thing only in bootstrap 4?
.navbar .dropdown-menu {
background-color: #BADA55;
}
/* and this styles the dropdwon trigger link, when open */
.navbar .dropdown.show a {
background-color: #BADA55;
}
...is enough.
Note .navbar limits it to menu and without it, it would style all .dropdowns, as long as you load your CSS after bootstrap(.min).css.
.navbar .dropdown-menu {
background-color: #BADA55;
}
.navbar .dropdown.show a {
background-color: #BADA55;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Title</a>
<div class="collapse navbar-collapse justify-content-stretch" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<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="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Design</a>
<a class="dropdown-item" href="#">Development</a>
<a class="dropdown-item" href="#">Consulting</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="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Please note none of your current selectors match anything, since you don't seem to have applied navbar-default class to any element.
As a general rule, expect many class names to have been refactored in v4, which allows shorter, more expressive syntax and greater overall flexibility.
Applying v3 solutions to v4 examples is generally regarded as bad practice, just like expecting v2 solutions to work on v3 examples.
This works for Bootstrap 4.1.3:
.dropdown-menu {
background-color: #ff0000;
}