I am trying to get the Navbar links inside my navbar and they are showing up under it. I am not sure what happened but I am using a flexbox because it is a requirement for the project I am working on but it moved my nav links and I am not sure why
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
height: 40px;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
The magic of flex is that it scales to the size it needs, so usually hardcoding height and width are counter purpose to the usage of flex. removing the hardcoded height fixed the issue for me
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Your navbar ist simply cut off. I removed the height and now its showing correctly.
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
I'm creating a header that will be composed by different redirection links, and some of the cases will be some dropdown elements composed by several links that will be shown when clicking on the main link.
here si my html
<div id="row">
<div class="col-xs-12">
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu">
<li class="nav-item">
<a class="nav-link">PERSONAL INFO</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link-toggle" v-on:click="displayAnimalList = !displayAnimalList">PERSONAL FORM</a>
<ul class='dropdown-menu' v-show="!displayAnimalList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>FORM DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >AUTOCOMPLETE</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' v-on:click="displayServiceList = !displayServiceList">SERVICES</a>
<ul class='dropdown-menu' v-show="!displayServiceList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >LA CRÉMATION PRIVÉE</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' href="https://www.esthima.fr/incineration-reference">PERSONAL S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>COMPANY S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >FULL S INFO</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link ">SHOP</a>
</li>
<li class="nav-item active">
<router-link class="nav-link" to="/devis">TARIFS ET DEVIS </router-link>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' v-on:click="displayContactList = !displayContactList">CONTACT</a>
<ul class='dropdown-menu' v-show="!displayContactList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>MAIL</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >PHONE</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
and here mi css
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
}
.nav-item {
padding: 25px;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
list-style: none;
}
a {
font-size: 14px;
color: #D53865;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
.added {
display: none;
}
I have it laid out as it should be, but the problem arises when I click on the drop-down menus, which pushes the rest of the elements of the header and unlays them. I have tried to introduce an absolute position to the elements that make up the header but it does not respect the original layout as shown in the following link
https://codepen.io/carlosurra/pen/YzqXjdP
Greetings and thanks in advance for your time and help
You should be able to fix that by adding position: relative; to the class .nav-items and position: absolute; to the class .dropdown-menu
here is the updated css
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
}
.nav-item {
padding: 25px;
position: relative;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
list-style: none;
position: absolute;
}
a {
font-size: 14px;
color: #D53865;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
.added {
display: none;
}
This is my navbar... When I hover over a link it should turn to normal text but it is showing me diagonal text....
.navbar-menu2 li a:hover{
color: black;
width: 100%;
height: auto;
background-color: red;
transform: skewX(-30deg);
transform-origin: top;
/* Zentriert den Inhalt */
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
.navbar-menu2 li a span:hover{
transform: skewX(30deg);
}
<nav class="navbar navbar-expand-md bg-dark p-0">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav1">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav navbar-menu2 text-white">
<li class="nav-item">
<span>Home</span>
</li>
<li class="nav-item">
<span>Classes</span>
</li>
<li class="nav-item">
<span>Trainers</span>
</li>
<li class="nav-item">
<span>Pricing</span>
</li>
<li class="nav-item">
<span>Gallery</span>
</li>
<li class="nav-item">
<span>Blog</span>
</li>
<li class="nav-item">
<span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
It works fine when we hover over the text. i.e my span tag.. I want the same in li tag: get normal text when we hover over it.
Thanks in advance !
You need to put the reversed transform (transform: skewX(30deg);) on
.navbar-menu2 li a:hover span
instead of
.navbar-menu2 li a span:hover
because the span doesn't always get hovered when the related a is hovered:
.navbar-menu2 li a:hover{
color: black;
width: 100%;
height: auto;
background-color: red;
transform: skewX(-30deg);
transform-origin: top;
/* Zentriert den Inhalt */
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
.navbar-menu2 li a:hover span{
transform: skewX(30deg);
}
<nav class="navbar navbar-expand-md bg-dark p-0">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav1">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav navbar-menu2 text-white">
<li class="nav-item">
<span>Home</span>
</li>
<li class="nav-item">
<span>Classes</span>
</li>
<li class="nav-item">
<span>Trainers</span>
</li>
<li class="nav-item">
<span>Pricing</span>
</li>
<li class="nav-item">
<span>Gallery</span>
</li>
<li class="nav-item">
<span>Blog</span>
</li>
<li class="nav-item">
<span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
Try this:-
Remove:- transform: skewX(-30deg); from your CSS.
.navbar-menu2 li a:hover{
color: black;
width: 100%;
height: auto;
background-color: #f0f0f0;
transform-origin: top;
/* Zentriert den Inhalt */
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}
.navbar-menu2 li a span:hover{
transform: skewX(30deg);
}
<nav class="navbar navbar-expand-md bg-dark p-0">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav1">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav navbar-menu2 text-white">
<li class="nav-item">
<span>Home</span>
</li>
<li class="nav-item">
<span>Classes</span>
</li>
<li class="nav-item">
<span>Trainers</span>
</li>
<li class="nav-item">
<span>Pricing</span>
</li>
<li class="nav-item">
<span>Gallery</span>
</li>
<li class="nav-item">
<span>Blog</span>
</li>
<li class="nav-item">
<span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
I am trying to create a responsive navbar for mobile, but I am having trouble getting the link containers to resize properly. I also cannot seem to get the text to center itself vertically. I have tried using auto padding and margins in both cases, but they don't seem to be doing anything. I am using Bootstrap.
My questions are:
How do I center the text vertically within its container?
How do I get the width of each link's container to be the width of the text
How do I then get the spacing between each container to be the same, so that all together they fill the width of the screen?
HTML
<div class="container" id="nav-container-mobile">
<ul class="list-unstyled list-inline text-center d-flex" id="nav-list-mobile">
<li class="list-inline-item text-center nav-link-horizontal" id="nav-profile-link-mobile">
<a class="nav-link" href="#Profile">
<div class="nav-link-container-mobile">Profile</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-experience-link-mobile">
<a class="nav-link" href="#Experience">
<div class="nav-link-container-mobile">Experience</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-skills-link-mobile">
<a class="nav-link" href="#Skills">
<div class="nav-link-container-mobile">Skills</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-project-link-mobile">
<a class="nav-link" href="#project">
<div class="nav-link-container-mobile">Projects</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-contact-link-mobile">
<a class="nav-link" href="#Contact">
<div class="nav-link-container-mobile">Contact</div>
</a>
</li>
</ul>
</div>
CSS
#nav-container-mobile {
position: absolute;
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
#nav-list-mobile {
width: 100%;
height: 100%;
margin: 0;
vertical-align: middle;
}
.nav-link-horizontal {
height: 100%;
width: 15vw;
min-width: 50px;
}
.nav-link-container-mobile {
padding: auto;
height: 100%;
overflow-wrap: break-word;
}
.nav-link {
color: #aeaeae;
}
Any help or advice is appreciated.
JSFiddle
It would be simpler to use the Bootstrap 4 Nav Fill or Justify, and then just change the background color and other styles as needed.
https://www.codeply.com/go/WsWHHIfRlh
<div class="navbar navbar-expand navbar-dark" id="nav-container-mobile">
<div class="container-fluid">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
#nav-container-mobile {
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
.nav-link {
color: #aeaeae;
}
I'm trying build a dropdown menu con HTML and CSS, but the problem is that when I hover on the menu item that contains the sub-menu, this one appears, but when I try to hover it, it disappears.
Here's the code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
}
header {
height: 120px;
background: #353638;
width: 100%;
z-index: 1;
}
#c-header {
width: 60%;
margin: 0 auto;
height: 100%;
}
#logo {
float: left;
width: 76px;
height: 35px;
margin: 40px;
}
#logo img {
display: block;
height: 100%;
width: 100%;
}
nav {
float: right;
margin: 15px;
line-height: 70px;
}
.nav-item {
list-style-type: none;
float: left;
font-family: 'Lato', sans-serif;
font-weight: bold;
height: 90px;
display: block;
position: relative;
z-index: 1;
}
.nav-item > a {
text-decoration: none;
color: white;
display: block;
height: 100%;
line-height: 90px;
padding: 0 15px 0 15px;
transition: background .5s ease;
}
.nav-item a:hover {
background: #337ab7;
}
.nav-item .sub-menu {
background: #337ab7;
position: absolute;
width: 250px;
display: none;
z-index: 9999;
}
.sub-menu ul {
overflow: hidden;
list-style-type: none;
padding: 10px;
}
.sub-menu-item {
height: 40px;
}
.sub-menu-item a {
text-decoration: none;
color: white;
display: block;
line-height: 32px;
padding: 4px 0 4px 20px;
transition: background .3s ease;
}
.sub-menu-item a:hover {
background: #333;
}
.nav-item a:hover ~ .sub-menu {
display: block;
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sima</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.css">
<script src="js/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<header>
<div id="c-header">
<a href="#" id="logo">
<img src="img/logo.png" alt="sima_logo">
</a>
<nav id="menu">
<ul>
<li class="nav-item">
Home
</li>
<li class="nav-item">
<a href="#" id="oap">Our Another Page
<i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div class="sub-menu">
<ul id="oap-sub-menu">
<li class="sub-menu-item">Our Team
</li>
<li class="sub-menu-item">Our Testimonial
</li>
<li class="sub-menu-item">Our Latest Blog
</li>
<li class="sub-menu-item">Our Pricing
</li>
<li class="sub-menu-item">Our Happy Client
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="#" id="sp">Stick Page
<i class="fa fa-angle-down"></i>
</a>
<div class="sub-menu">
<ul id="sp-sub-menu">
<li class="sub-menu-item">Blog Page
</li>
<li class="sub-menu-item">Single Blog Page
</li>
</ul>
</div>
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Our Skill
</li>
<li class="nav-item">
Our Service
</li>
<li class="nav-item">
Our Portfolio
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>
You problem is that once you move your mouse from .nav-item a to the .sub-menu, the .nav-item a is no hovered so this select .nav-item a:hover ~ .sub-menu is not valid.
You can fix this by:
.nav-item a:hover ~ .sub-menu, .sub-menu:hover {
display: block;
z-index: 9999;
}
Here is a codepen:
http://codepen.io/anon/pen/xEGbYa
This will make sure the .sub-menu will stay block while you hover it as well.
The problem now is that you got a new issue - once you move your mouse from the top menu (.nav-item a) to the sub menu (.sub-menu) - your top menu is not longer with the correct background.
To fix this you will need to change your html structure (or use javascript), because you can't select the a previous element based on current hovered element (the ~ selector is applied to the "next" element).
https://codepen.io/Kuldeep_2110/pen/MWvpZoR?editors=1100
Note : Made with bootstrap classes
#header{
position: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid rgba(255,255,255,0.15) ;
box-shadow: 0 0 0 rgb(0 0 0 / 10%);
}
h1,h2,h3,h4,h5,h6{
font-weight: 600;
line-height: 1.5;
font-family: Poppins,sans-serif;
}
a{
text-decoration: none;
}
.navbar{
padding: 0;
}
header .container-fluid{
padding: 0 30px;
}
.main-nav .nav-link{
display: block;
line-height: 22px;
padding: 14px 5px;
color: #666;
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: Poppins,sans-serif;
}
.navbar-brand{
padding: 0 30px 0 0;
}
.nav-item{
position: relative;
}
.main-nav .nav-item .nav-link:hover{
color: #1abc9c;
}
.dropdown-1, .dropdown-2{
display: block;
opacity: 0;
margin-top: 15px;
z-index: -9999;
pointer-events: none;
border-top: 2px solid #1abc9c !important;
width: 240px;
position: absolute;
background-color: #fff;
box-shadow: 0 13px 42px 11px rgb(0 0 0 / 5%);
border: 1px solid #eee;
z-index: -99;
top: 100%;
left: 0;
padding: 10px;
visibility: hidden;
}
.megamenu{
left: 240px;
}
.dropdown-1 .nav-item, .dropdown-2 .nav-item{
display: none;
visibility: hidden;
}
.nav-link div>.bi{
float: right;
}
.nav-link div span .bi{
padding-right: 10px;
}
.dropdown-1 .nav-item .nav-link, .dropdown-2 .nav-item .nav-link{
padding: 10px 15px;
font-weight: 700;
border: 0;
transition: all .2s ease-in-out;
position: relative;
display: block;
line-height: 22px;
font-size: 12px;
color: #666;
letter-spacing: 0;
font-family: Lato,sans-serif;
}
.nav-item:hover>.dropdown-1, .nav-item:hover>.dropdown-2{
opacity: 1;
margin-top: 0;
z-index: 399;
visibility: visible;
pointer-events: all;
transition: opacity .2s ease,margin .4s ease;
}
.nav-item:hover > .nav-link{
color: #1abc9c;
}
.nav-item:hover>.dropdown-1 .nav-item, .nav-item:hover>.dropdown-2 .nav-item{
display: block;
visibility: visible;
}
.dropdown-1 .nav-item .nav-link:hover{
transform: translateX(5px);
background-color: #f7f7f7;
}
.megamenu ul .nav-item{
display: inline-block;
}
.search{
flex-direction: row;
}
.search .nav-link{
margin: 0 8px;
position: relative;
font-size: 18px;
display: inline-block;
}
.span{
display: block;
position: absolute;
top: 3px;
right: -1px;
font-size: 10px;
color: #fff;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
border-radius: 50%;
overflow: hidden;
background-color: #1abc9c;
opacity: 0.8;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<header>
<nav id="header" class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid justify-content-end">
<a class="navbar-brand" href="#"><img src="img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav main-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#"><div>Home</div></a>
<ul class="dropdown-1">
<li class="nav-item">
<a class="nav-link" href=""><div>Niche Demos</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Block</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>One-Page Demos</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Corporate</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<div>Home - Portfolio <i class="bi bi-chevron-right"></i></div>
</a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Portfolio - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Portfolio - Layout 2</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Portfolio - Layout 3</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Portfolio - Layout 4</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Blog <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Blog - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Blog - Layout 2</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Blog - Layout 3</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Shop <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Shop - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Shop - Layout 2</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Shop - Layout 3</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Shop - Layout 4</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Magizine <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Magazine - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Magazine - Layout 2</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Magazine - Layout 3</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Landing page <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Landing Page - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Landing Page - Layout 2</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Landing Page - Layout 3</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Fullscreen <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Fullscreen - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Fullscreen - Layout 2</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Onepage <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Onepage default</div></a>
</li>
</ul>
<ul class="dropdown-2 megamenu">
<li class="nav-item">
<a class="nav-link" href=""><div>Onepage Submenu</div></a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Features</div></a>
<ul class="dropdown-1">
<li class="nav-item">
<div><span><i class="bi bi-files"></i></span>Slider<i class="bi bi-chevron-right"></i></div>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href="">
<div>Revolution Slider<i class="bi bi-chevron-right"></i></div>
</a>
<ul class="dropdown-2">
<li class="nav-item">
<a href="" class="nav-link">
Premium Templates
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Full Screen
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Full Width
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Kenburns Effect
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
HTML 5 Video
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<div>Canvas Slider<i class="bi bi-chevron-right"></i></div>
</a>
<ul class="dropdown-2">
<li class="nav-item">
<a href="" class="nav-link">
Full Width
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Fade Transition
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Autoplay Feature
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Custom Video Event
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Pagination Navigation
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Columns
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<div>Flex Slider<i class="bi bi-chevron-right"></i></div>
</a>
<ul class="dropdown-2">
<li class="nav-item">
<a href="" class="nav-link">
Default Layout
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
With Thumbs
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<div><span><i class="bi bi-umbrella"></i></span>Headers<i class="bi bi-chevron-right"></i></div>
<ul class="dropdown-2">
<li class="nav-item">
<a href="" class="nav-link">
Default Layout
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
With Thumbs
</a>
</li>
</ul>
</li>
<li class="nav-item">
<div><span><i class="bi bi-list"></i></span>Menu Styles<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-layout-split"></i></span>Mega Menu<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-receipt"></i></span>Forms</div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-gift"></i></span>Widgets<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-check-circle-fill"></i></span>Page Title<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-layout-text-window-reverse"></i></span>Side Panels<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-fullscreen"></i></span>Modal Onland<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-grid-3x3-gap-fill"></i></span>Footers<i class="bi bi-chevron-right"></i></div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Pages</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Portfolio</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Blog</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Shop</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Shortcodes</div></a>
</li>
</ul>
<ul class="navbar-nav search">
<li class="nav-item"><a class="nav-link" href=""><i class="bi bi-search"></i></a></li>
<li class="nav-item"><a class="nav-link" href=""><i class="bi bi-bag-fill"></i><span class="span">5</span></a></li>
</ul>
</div>
</div>
</nav>
</header>
I got a solution without JavaScript.
Note: the following will work for vertical sidebar menu, for horizontal Menubar it will occur a little modification.
Look at the Image of my navbar attached below, without JavaScript:
Wraper{
width : 270px;//mandatory
postion: relative; //mandatory
height: 100vh; //it will strech menu to full page
}
inside first ul{
position: relative;
z-index: 999;
height: 100%;
}
inside second ul{
display: none;//mandatory to hide initialy
float: left;//mandatory
clear: both;//mandatory
position: absolute; //first step to solve your issue.
left: 268; //2nd step - Put left value 2 unit less than width value in wrapper, so after removing mouse you wont face the issue.
}
My navbar
Here is an example Mega Menu (you can edit it accordingly); hover on the "Home" button in navbar to see hover effect.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a{
display: block;
text-decoration: none;
}
header{
width: 100%;
background: brown;
padding: 10px 30px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
height: 100px;
}
.logo{
width: 150px;
}
.logo img{
width: 100%;
height: 80px;
}
.navbar ul{
list-style: none;
}
.nav{
display: flex;
}
.nav>.nav-item{
position: relative;
}
.nav>.nav-item>.nav-link{
padding: 35px 15px;
text-transform: uppercase;
}
.nav-link{
color: white;
font-size: 22px;
padding: 10px;
}
.nav-link:hover{color: yellow;}
.nav-dropdown{
position: absolute;
padding: 15px;
top: 100%;
left: 0;
background: brown;
border-top: 2px solid yellow;
width: 200px;
opacity: 0;
margin-top: 20px;
transition: all 300ms ease-in-out;
}
.nav-item:hover .nav-dropdown{
opacity: 1;
margin-top: 0;
}
.nav-dropdown+.nav-dropdown{
left: 200px;
border-left: 2px solid yellow;
}
.nav-dropdown .nav-item .nav-link:hover{
background: rgba(205, 92, 92, 0.4);
transform: translateX(5px);
transition: all 300ms ease-in-out;
box-shadow: inset 0 0 15px 5px indianred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mega Menu Snippet</title>
<link rel="stylesheet" href="style.css">
<style>
h1{
color: white;
font-family: monospace;
text-transform: uppercase;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="contest/section.png" alt="logo">
</div>
<nav class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="">
Home
</a>
<ul class="nav-dropdown">
<h1>Section 1</h1>
<li class="nav-item">
<a href="" class="nav-link">
Home 1
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Home 2
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Home 3
</a>
</li>
</ul>
<ul class="nav-dropdown">
<h1>Section 2</h1>
<li class="nav-item">
<a href="" class="nav-link">
Home 1
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Home 2
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Home 3
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
Services
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
Contact
</a>
</li>
</ul>
</nav>
<div class="user">
<!-- Icons -->
</div>
</header>
</body>
</html>