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;
}
Related
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 having problems keeping the menu items on center when I'm adding a navbar brand.
The menu items move slightly to the right when I'm adding a logo on the left side of the navbar?
How to keep it centered?
Here is my navbar code(bootstrap):
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#"><img class="img-fluid" src="https://psmedia.playstation.com/is/image/psmedia/call-of-duty-warzone-badge-01-ps4-en-27feb20_1583405365530?$HugeHero_Badge$" height="15%" width="15%"></a>
<ul class="navbar-nav mx-md-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">WEAPONS <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOADOUTS</a>
</li>
</ul>
TEST
</div>
</nav>
With the code you provided here is a quick workaround. It may not be the most organized solution but it should work.
You can also remove the default padding in li tags. That causes things to move a little to the right.
Your Styles.css
/* Set all contents in container to be centered automatically */
#navbarTogglerDemo01 {
position: absolute;
top: 0px;
left: 0px;
width: 100vw;
max-width: 100vw;
display: block;
text-align: center;
}
/* And all direct sub tags display inline block */
.navbar-brand .navbar-nav .button {
display: inline-block;
}
ul {
list-style-type: none;
padding: 0;
}
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#"><img class="img-fluid" src="https://images.pexels.com/photos/176837/pexels-photo-176837.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" height="15%" width="15%"></a>
<ul class="navbar-nav mx-md-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">WEAPONS <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOADOUTS</a>
</li>
</ul>
TEST
</div>
</nav>
Another quick solution, but not 100% responsive:
/* This will move each block slightly back to the left, remember to provide a unit to move left. */
.navbar-brand,
.navbar-nav {
position: relative;
left: -10px;
/* Change this to your custom amount: px % em ... etc */
}
<nav>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="https://images.pexels.com/photos/176837/pexels-photo-176837.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" height="15%" width="15%">
</a>
<ul class="navbar-nav mx-md-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">WEAPONS <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOADOUTS</a>
</li>
</ul>
TEST
</div>
</nav>
Please let me know if this helps or in case you have a question.
Good Luck!!
How can I make a page like this with slanted lines?
Can I put an angle of 20 degrees for example? I have to put 3 div?
For now I put a first div to put a logo in the middle, then I put the navigation bar and I would like the navigation bar to be aligned with the angle just above the oblique line.
I have to work on bootstrap 3
I'm a bit lost. thank you very much for your help and explanations
<div class="container" style="background-color: #04342E; width:100%">
<img class="img-responsive center-block" style="height: 600px; align-items: center;"; src="/i/gp-logo.png" />
<nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
<ul class="nav navbar-nav" style="text-decoration: none">
<li class="nav-item">
<a class="nav-link active" href="#" style="color: white;">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Tableaux</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Papeterie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Contact</a>
</li>
</ul>
</nav>
<div>
</div>
</div>
Either you can create div with clip-path I would recommand to use: https://bennettfeely.com/clippy/
Either you use background with linear-gradient.
DEMO with clip-path:
body{
background: #04342E;
margin:0;
}
div.polygon{
height: 100vh;
width: 100vw;
background: white;
clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 75%);
display:flex;
}
.content{
height: 50%;
width: 100%;
background-color:rgba(255,0,0,0.3); /** Just used to show the written area But it should be removed **/
margin:auto;
}
<div class="polygon">
<div class="content">
Lorem ipsum
</div>
</div>
.container {
background-color: #04342E;
width: 100%;
height: 500px;
position: relative;
}
.container::after {
position: absolute;
content: "";
left: 0px;
right: 0px;
bottom: 0px;
border-bottom: solid white 500px;
transform-origin: bottom right;
transform: skew(1000deg);
}
.container #content {
background-color: #04342E;
width: 100%;
height: 500px;
margin-top: 600px;
position: relative;
}
.container #content::after {
position: absolute;
content: "";
top: 0px;
right: 0px;
left: 0px;
border-top: solid white 500px;
transform-origin: top left;
transform: skew(-1000deg);
}
<div class="container">
<img class="img-responsive center-block" style="height: 100px; align-items: center;" ; src="./images/image 5.png" />
<nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
<ul class="nav navbar-nav" style="text-decoration: none">
<li class="nav-item">
<a class="nav-link active" href="#" style="color: white;">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Tableaux</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Papeterie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Contact</a>
</li>
</ul>
</nav>
<div id="content">
</div>
</div>
you can use psuedo classes in css to create this. see above for the code.
So trying to achieve responsive collapsible navigation with two rows, where first includes logo and language select and second row main links:
| |
| LOGO lang |
| link1 link2 link3 link4 |
jsfiddle snippet of progress so far
Cant get equal width for the main links, so that are distributed horizontally evenly on lg viewport and above. With the structure and classes am using links are stacked very tight.
Second row navigation:
<ul class="navbar-nav nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Categories
</a>
<div class="dropdown-menu">
<a class="dropdown-item">Cat 1</a>
<a class="dropdown-item">Cat 2</a>
<a class="dropdown-item">Cat 3</a>
<a class="dropdown-item">Cat 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
Any ideas how to override classes or other solution? Thanks!
Specify the initial size of your flex items (li) to match content by changing the flex-basis from 0 to auto -- you can enable in Bootstrap 4 by using the flex-fill class. Add it to your HTML:
<li class="nav-item flex-fill">
<a class="nav-link" href="#">Live Auction</a>
</li>
Or add the property in your CSS:
.nav-justified li.nav-item {
/* ... */
flex-basis: auto;
}
Fiddle example: https://jsfiddle.net/wcj1gzr5/1/
To distribute flex items with an effect like justify-content: space-between the width of the div and ul which contain the flex items should expand their width (giving available space to distribute flex items). To do this, set min-width: 100%; on both elements to have them fill their containing element and then use justify-content on the ul to control spacing & positioning.
Fiddle example: https://jsfiddle.net/wcj1gzr5/2/
You can do this by adding width:100% to .navbar-collapse, .nav-pills. Below is the snippet for the same
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.navbar-collapse,
.nav-pills {
width: 100% !important
}
header {
width: 100%;
background: #282828;
background-position-x: 0%;
background-position-y: 0%;
background-image: url("https://cdn.wallpapersafari.com/65/40/cJtjUm.jpg");
background-size: cover;
background-position: center;
}
/* center the logo */
.navbar {
justify-content: center;
}
/* in order to center the logo */
.navbar .navbar-toggler {
position: absolute;
right: 1rem;
top: 0.5rem;
}
/* center all navbar items */
.navbar-nav {
align-items: center;
}
/* since it's expanding at lg */
#media (min-width: 992px) {
/* in order to display in 2 rows */
.navbar-expand-lg {
flex-flow: column nowrap;
}
/* same logic as the navbar-toggler above */
.navbar-nav.upper-controls {
position: absolute;
right: 1rem;
top: 0.5rem;
font-size: 85%;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light">
<a href="#" class="navbar-brand">
CompanyLogo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav upper-controls">
<li class="nav-item">
<a class="nav-link" href="#">Language</a>
</li>
</ul>
<ul class="navbar-nav nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Categories
</a>
<div class="dropdown-menu">
<a class="dropdown-item">Cat 1</a>
<a class="dropdown-item">Cat 2</a>
<a class="dropdown-item">Cat 3</a>
<a class="dropdown-item">Cat 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
</body>
</html>
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>