I would like to ask how to move nav-link to the right? becuase I try it like float: right or margin left:auto,it will lead hamburger menu to the middle. I want the hamburger menu and navlink all to right side. Besides, when I minimize my screen smaller, the hamburger menu and navlink are fine they are in right side, just when I minimize my screen bigger, the nav-link is at the left side. Also, when I minimize the screen smaller, I click the dropdown menu, the navbar become bigger and the dropdown menu is inside the navbar which lead the navbar bigger. I want the dropdownmenu outside the navbar. I try to use position: fixed, position :relative and position absolute, it doesn't fix it. Therefore, I would like to ask is there any solutions about. So, I can fix it. Thank you.
This my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!--Icon-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<title>Admin Dashboard</title>
<style>
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link.active {
color: #021B4D;
}
.sidebar .nav-link:hover {
color: #FFDB1A !important;
}
/*Navbar*/
.navbar{
background-color:#021B4D !important;
}
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
margin-left:20px;
}
.white-text{
color:#fff;
}
.dropdown-menu a:hover{
background-color:#021B4D;
color:#fff;
}
</style>
</head>
<body>
<nav class=" navbar navbar-expand-lg sticky-top ">
<a class="navbar-brand" href="">
<img src="eGrocery_SDP(Logo).jpeg" width="50" height="40">
</a>
<button class=" navbar-toggler navbar-toggler-right " type="button" data-toggle="collapse" data-
target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="margin-
left:auto;"><span class="white-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<ul class="navbar-nav " >
<li class="nav-item dropdown " >
<a class="nav-link dropdown-toggle"data-toggle="dropdown" data-target="dropdown-target" href="#"><i
class="far fa-user-circle" style="font-size:40px;color:#fff;"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
Account
<div class="dropdown-divider"></div>
Logout
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-5">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Manage Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Manage Staff
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Sales Reports
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
To fix the user icon always to the right, I added this css:
a.nav-link.dropdown-toggle{
text-align: right;
}
Then on large screen to keep your ul always to the right I add BS4 class ml-lg-auto that will add margin au to the left for screen over lg break points.
For having hambuger align right add class ml-left to your button.
If you want to have the same effect of your dropdown in small and large screen I added css as follow:
#media (max-width: 991px){
.user-dropdown-menu{
position: absolute !important;
left: -6rem !important;
}
}
a.nav-link.dropdown-toggle{
text-align: right;
}
#media (max-width: 991px){
.user-dropdown-menu{
position: absolute !important;
left: -6rem !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!--Icon-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<title>Admin Dashboard</title>
<style>
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link.active {
color: #021B4D;
}
.sidebar .nav-link:hover {
color: #FFDB1A !important;
}
/*Navbar*/
.navbar{
background-color:#021B4D !important;
}
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
margin-left:20px;
}
.white-text{
color:#fff;
}
.dropdown-menu a:hover{
background-color:#021B4D;
color:#fff;
}
</style>
</head>
<body>
<nav class=" navbar navbar-expand-lg sticky-top ">
<a class="navbar-brand" href="">
<img src="eGrocery_SDP(Logo).jpeg" width="50" height="40">
</a>
<button class=" navbar-toggler navbar-toggler-right ml-auto" type="button" data-toggle="collapse" data-
target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="margin-
left:auto;"><span class="white-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<ul class="navbar-nav ml-lg-auto" >
<li class="nav-item dropdown " >
<a class="nav-link dropdown-toggle"data-toggle="dropdown" data-target="dropdown-target" href="#"><i
class="far fa-user-circle" style="font-size:40px;color:#fff;"></i></a>
<div class="dropdown-menu user-dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
Account
<div class="dropdown-divider"></div>
Logout
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-5">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Manage Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Manage Staff
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Sales Reports
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Related
I'm using the Boostrap scrollspy for my onpage navigation.
Every link has an offset of 70 pixels. But for one single nav item I need a different offset of 140 pixels.
Is there a way to do this?
$(function() {
$('body').scrollspy({
target: '#scrollnav',
offset: 70,
});
});
#scrollnav {position: sticky; top:0;}
.nav-link.active {background: blue; color:#fff;}
.content {height: 1500px; padding: 140px 16px;}
.content-1 {padding: 70px 16px;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<nav id="scrollnav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link page-scroll" href="#link_1">First Link with only 20px offset</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#link_2">Second Link</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#link_3">Third Link</a>
</li>
</ul>
</nav>
<div id="link_1" class="content content-1">First Link with only 20px offset</div>
<div id="link_2" class="content">Second Link</div>
<div id="link_3" class="content">Third Link</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
I am having an issue with my bootstrap hamburger menu. When I click on the menu, it opens to display the links within, but when I click on it again or click anyway on the screen, it doesn't close the menu and I can't see what's causing this to break.
Is there a way to fix it? Even including some javascript or jquery as a workaround to toggle close or opening will help.
Below is the code:
<link rel="stylesheet" href="/../style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://js.stripe.com/v3"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="/../#"><img src="../img/logo.png"></a>
<button class="navbar-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">
<a class="nav-link" href="/../#top">HOME</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="/../#courses">OUR COURSES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#services">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#contact">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</section>
style.css
/*----------Navigation-------*/
#nav-bar
{
position: sticky;
top: 0;
z-index: 10;
}
.navbar-brand img
{
height: 60px;
width: auto;
padding-left: 30px;
}
.navbar-nav li
{
padding: 0 10px;
}
.navbar-nav li a
{
float: right;
text-align: left;
}
#nav-bar ul li a:hover
{
color: #747c85!important;
}
.navbar
{
background: #fff;
}
.navbar-toggler
{
border: none!important;
}
.nav-link
{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
When I took your code into my own computer and examined it, I saw it was working. But the problem is that I prefer to keep bootstrap codes between body tags. Your problem may be caused by this. Choose body labels instead of Head labels. Also check your bootstrap links. May be incorrect.
!! İmportant:
There may be another problem. If you are using media query on your site, please check media query in the section where the navbar is responsive. A styling in that section may have produced incorrect results!!
/*----------Navigation-------*/
#nav-bar
{
position: sticky;
top: 0;
z-index: 10;
}
.navbar-brand img
{
height: 60px;
width: auto;
padding-left: 30px;
}
.navbar-nav li
{
padding: 0 10px;
}
.navbar-nav li a
{
float: right;
text-align: left;
}
#nav-bar ul li a:hover
{
color: #747c85!important;
}
.navbar
{
background: #fff;
}
.navbar-toggler
{
border: none!important;
}
.nav-link
{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Website Design</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
>
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="/../#"><img src="../img/logo.png"></a>
<button class="navbar-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">
<a class="nav-link" href="/../#top">HOME</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="/../#courses">OUR COURSES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#services">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#contact">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The problem is your html structure, there are many html tags, body tags and head sections misplaced. I removed some to test and at some point the menu worked, but of course the correct solution is to clean and order the entire structure.
i'm just learning about front end. i have a problem to make an overlay navigation bar instead of dropdown menu when it reach extra small page. so this is what i've done:
function openNav() {
document.getElementById("navbarSupportedContent").style.height = "100%";
}
function closeNav() {
document.getElementById("navbarSupportedContent").style.height = "0%";
}
#navbarSupportedContent {
height: 0;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#navbarSupportedContent a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
×
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
when i try to hit the button when it reach extra small, the overlay goes down but it doesn't reach a hundred percent page and it suddenly goes up again. does anyone can help me ?
thanks in advance !
This is happening because you are mixing up Bootstrap core functions and your customs.
Simply remove the Collapse classes of Bootstrap, since you already write your javascript code to achieve what you need.
Add this line of CSS:
#media (min-width: 992px) {
.navbar-expand-lg .navbar-toggler {
display: block;
}
}
Since Bootstrap 4 Media Queries will hide an element matching that class for a screen bigger than 992px.
And then remove all the collapse-related class from your HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navbarSupportedContent">
×
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
Here's a live working pen: https://codepen.io/alezuc/pen/dyYGobJ
Hope this helps!
I made Bootstrap Navbar logo in the middle. Here is a picture of the result:
however i have 1 issue:
when i resize the browser, the nav links seems to overlap on each other.
what im looking for is when i resize the browser the links remain relative to each other and not overlap until it collapses in bootstrap toggle button. What would be the solution here?
here is HTML and CSS
html,
body {
height: 100%;
width: 100%;
font-family: 'Arial', 'Poppins', sans-serif;
background-color: #2d2d2d;
margin: 0;
}
.navbar {
width: 100%;
z-index: 999;
background: #2d2d2d;
;
margin-top: 0;
padding: 2em;
/* display: flex; */
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
top: .1%;
position: absolute;
}
.navbar-nav li {
padding-right: 40px;
font-family: 'Myriad Pro';
font-weight: bold;
/* display: inline-block; */
}
#mt-nav-left {
position: absolute;
transform: translateX(60%);
right: 60%;
}
#mt-nav-right {
position: absolute;
transform: translateX(-65%);
left: 65%;
}
#banner {
overflow: auto;
z-index: 998;
}
#banner img {
width: 100%;
object-fit: cover;
}
#media (max-width: 1024px) {
#mt-nav-right {
position: static;
}
}
#media (max-width: 991px) {
#mt-nav-left {
position: relative;
}
#mt-nav-right {
position: relative;
}
}
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggle">
<i class="fas fa-bars" style="font-size: 21px;"></i>
</span>
</button>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="img/logo.png" width="85px" height="85px" class="d-inline-block align-top">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto" id="mt-nav-left">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="index.html">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto" id="mt-nav-right">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>
You can use flex-box to solve it. The idea is to place an empty box between two lists, with the following properties
flex-shrink: 0;
flex-basis: 100px //(not less then the width of your logo);
Look at the snippet that I made.
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.menu {
width: 100%;
}
.menu .navbar-nav {
flex-grow: 1;
}
/*
THIS CLASS PREVENTS OVERLAPING
*/
.menu .separator {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
max-width: 250px;
background: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm 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">
<div class="d-flex menu">
<ul class="navbar-nav mr-auto justify-content-end">
<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>
</ul>
<!-- Box that prevents overlaping -->
<div class="separator">
</div>
<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>
</ul>
</div>
</div>
</nav>
This is my approach for a navbar with your specifications using Bootstrap 4.
1) There are two navbars-collapse items, the first one with items justified to the end, the second one with the default items justified to start (we will call these A and C respectively).
2) The brand (called B) will be centered using the class mx-auto, the effect of overflowing the navbar is approached using next style (only on not collapsed mode):
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
3) We manage the order of the items (A, B and C) using Order classes, on small screen devices the order will be B -> A -> C, on large screen devices will be A -> B -> C. We also use the Spacing utilities p classes for add some padding between items.
This is just my idea, you can check next example (on full screen mode) and play with the browser's width. I hope this helps you...
.navbar {
z-index: 999;
background: #2d2d2d;
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-nav li {
font-family: 'Myriad Pro';
font-weight: bold;
}
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark sticky-top w-100">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="toggle">
<i class="fas fa-bars" style="font-size:21px;"></i>
</span>
</button>
<div class="navbar-collapse collapse dual-nav justify-content-end order-1 order-md-1">
<ul class="navbar-nav">
<li class="nav-item p-2">
<a class="nav-link scroll" href="index.html">
HOME <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto order-0 order-md-2 p-3" href="index.html">
<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" width="85px" height="85px">
</a>
<div class="navbar-collapse collapse dual-nav order-2 order-md-3">
<ul class="navbar-nav">
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>
I want to change the background of nav item on dropdown when they are clicked. and also in screen resolution less than 992px the nav menu appears after clicking toggle button but thats not the problem, the problem is that the submenus in dropdown are in such a way that it is difficult to understand whoose submenu is displaying. I want to fix this.
this following is my html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<!-- bootstrap link -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="css/custom.css">
<!-- JQuery3.2.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" 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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Trekking In Nepal -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Trekking in Nepal
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Annapurna Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Annapurna Circuit</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Annapurna Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Upper Mustang</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Everest Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Jiri to Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Everest Three Pass</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Langtang Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Helambu</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Langtang Gosaikunda Lake</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Valley</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Custom js -->
<script src="js/custom.js"></script>
</body>
</html>
This following is what i write in custom.css
.navbar-collapse .navbar-nav .dropdown .dropdown-menu{
margin-left: 0px !important;
margin-top: 0px !important;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
.dropdown:hover>.dropdown-menu{
display: block;
}
.dropdown-submenu:hover>.dropdown-menu{
display: block;
}
#media only screen and (max-width: 991px) {
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
}
.submenuNav{
opacity: 0.8;
margin-right: 3px;
}
.submenuNav:hover{
opacity: 1;
transform: translateX(3px);
transition: 0.4s all ease;
margin-right: 0px;
}
.dropdown-item{
background-color: none !important;
color: #007bff;
opacity: 0.8;
}
.dropdown-item:hover{
background-color: none !important;
color: #007bff;
opacity: 1;
transition: 0.2s all ease;
}
.customNav{
background-color: none !important;
color:#007bff !important;
}
.navbar .navbar-toggler .navbar-toggler-icon{
background-color: #007bff;
}
This following is js file I write in custom.js
$(document).ready(function(){
$(".dropdown-item").click(function(){
$(this).addClass("customNav");
});
});
You are saying:
I want to change the background of nav item on dropdown when they are clicked
In this case, you need to change/set the active css selector for the a tags like so:
.dropdown-submenu a:active {
background-color: yellow;
}
More info:
https://www.w3schools.com/cssref/sel_active.asp