Why hover effect is not working with Unicons icon library? - html

I am using icons from this website - https://iconscout.com/unicons/explore/line
Icons are displayed correctly. When I apply the hover effect using it is not working.
My index.html script
<header class="header" id="header">
<nav class="nav container">
LOGo
<div class="nav__menu" id="nav_menu">
<ul class="nav__list grid">
<li class="nav_item">
<a href="#home" class="nav__link">
<i class="uil uil-estate nav__icons"></i>Home
</a>
</li>
<li class="nav_item">
<a href="#about" class="nav__link">
<i class="uil uil-user nav__icons"></i>About
</a>
</li>
<li class="nav_item">
<a href="#skills" class="nav__link">
<i class="uil uil-file-alt nav__icons"></i>Skills
</a>
</li>
<li class="nav_item">
<a href="#services" class="nav__link">
<i class="uil uil-briefcase-alt nav__icons"></i>Services
</a>
</li>
<li class="nav_item">
<a href="#portfolio" class="nav__link">
<i class="uil uil-scenery nav__icons"></i>Portfolio
</a>
</li>
<li class="nav_item">
<a href="#contact" class="nav__link">
<i class="uil uil-message nav__icons"></i>Contactme
</a>
</li>
</ul>
<i class="uil uil-times nav_close" id="nav-close"></i>
</div>
<div class="nav_btns">
<div class="nav__toggle" id="nav-toggle">
<i class="uil uil-apps"></i>
</div>
</div>
</nav>
</header>
In my CSS file, I searched the solution many suggested that to use !important after color but still, it is not working.
.nav__logo .nav__toggle {
color: var(--title-color);
font-weight: var(--font-medium);
}
.nav__logo:hover {
color: var(--first-color);
}
.nav__toggle {
font-size: 1.1rem;
cursor: pointer;
}
.nav__toggle:hover {
color: var(--first-color) !important;
}
#media screen and (max-width: 767px) {
.nav__menu {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--body-color);
padding: 2rem 1.5rem 4rem;
box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
border-radius: 1.5rem 1.5rem 0 0;
transition: .3s;
}
}
.nav__list {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
font-size: var(--small-font-size);
color: var(--title-color);
font-family: var(--font-medium);
}
.nav__link:hover {
color: var(--first-color) !important;
}
.nav__icons {
font-size: 1.2rem;
}
.nav__icons:hover {
color: var(--first-color) !important;
}
.nav__close {
position: absolute;
right: 1.3rem;
bottom: .5rem;
font-size: 1.5rem;
cursor: pointer;
color: var(--first-color);
}
.nav__close:hover {
color: var(--first-color-alt);
}
I have also used !important but still it is not working.


<!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">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<title>EJemplo</title>
</head>
<body>
<header class="header" id="header">
<nav class="nav container">
LOGo
<div class="nav__menu" id="nav_menu">
<ul class="nav__list grid">
<li class="nav_item">
<a href="#home" class="nav__link">
<i class="uil uil-estate nav__icons"></i>Home
</a>
</li>
<li class="nav_item">
<a href="#about" class="nav__link">
<i class="uil uil-user nav__icons"></i>About
</a>
</li>
<li class="nav_item">
<a href="#skills" class="nav__link">
<i class="uil uil-file-alt nav__icons"></i>Skills
</a>
</li>
<li class="nav_item">
<a href="#services" class="nav__link">
<i class="uil uil-briefcase-alt nav__icons"></i>Services
</a>
</li>
<li class="nav_item">
<a href="#portfolio" class="nav__link">
<i class="uil uil-scenery nav__icons"></i>Portfolio
</a>
</li>
<li class="nav_item">
<a href="#contact" class="nav__link">
<i class="uil uil-message nav__icons"></i>Contactme
</a>
</li>
</ul>
<i class="uil uil-times nav_close" id="nav-close"></i>
</div>
<div class="nav_btns">
<div class="nav__toggle" id="nav-toggle">
<i class="uil uil-apps"></i>
</div>
</div>
</nav>
</header>
</body>
</html>
<!- Solo necesita agregar
de la pagina de ellos
https://iconscout.com/unicons/getting-started/line-->


I'm not sure I understand, but it seems to me you're not setting and :hover effect anywhere. You need to add something like:
.nav_item a:hover i{
color:red;
}
then your icon will become red when hovering the link. You also need to add
.nav_item a:hover{
color:red;
}
to have the link also turn red


You have to add css in the :before selector like this : .uil-18-plus:hover:before

Related

In iphone safari and chrome brower z-index is not working. background overlapping issue in side navbar

Screenshot
In my project I am facing a issue only on IOS mobile content of the page is overlapping over my navsidebar but working perfectly fine on other devices.
You can check the live url of my site below:
https://webapp.world
Attached CSS and Html code of my angular project for your reference
Thanks in advance.
.
.pushNav {
height: 100%;
position: fixed;
top: 0;
z-index: 10000;
overflow: hidden;
background: #2e2f35;
transition: ease-in-out 0.5s;
}
.pushNav hr {
border: 1px solid #555;
}
.pushNav,
.pushNav a {
font-size: 1rem;
font-family: helvetica, sens-serif;
font-weight: 100;
color: #fff;
text-decoration: none;
}
.pushNavIsOpen {
overflow: auto;
height: 100%;
}
.js-topPushNav.isOpen,
.pushNav_level.isOpen {
right: 0;
}
.closeLevel,
.openLevel {
cursor: pointer;
}
.openLevel,
.closeLevel,
.pushNav a {
padding: 1em 1em;
display: block;
text-indent: 5px;
transition: background 0.4s ease-in-out;
}
.openLevel:hover,
.closeLevel:hover,
.pushNav a:hover {
background: #494a50;
}
.openLevel span {
padding: 0 1rem;
}
.hdg {
background-color: #1e1e24;
}
.closeLevel,
closelevel > i {
font-size: 1em;
color: #a5a5a4;
}
.burger {
overflow: hidden;
text-align: end;
cursor: pointer;
background-color: #eeeded !important;
-webkit-transform: translate3d(0, 0, 1px);
transform: translate3d(0, 0, 1px);
z-index: 9;
transition: top 0.3s;
}
.burger i {
font-size: 2.5em;
color: #ae0000;
}
Angular html code
<nav>
<ul class="pushNav js-topPushNav">
<li class="closeLevel js-closeLevelTop hdg">
<!-- <i class="fa fa-close"></i> -->
<i class="bi bi-x-circle"></i>
</li>
<!-- company -->
<li>
<!-- Begin section 1 -->
<div class="openLevel js-openLevel">
<!-- <span> <i class="bi bi-gear-wide-connected"></i></span> -->
Services
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li>
<div class="openLevel js-openLevel">
Mobile App Development
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li class="closetab" style="background: #ae0000">
<a routerLink="mobile-app-development"
>Mobile App Development</a
>
</li>
<li>
<a routerLink="mobile-app-development/ios-application"
>iPhone App Development</a
>
</li>
<li>
<a routerLink="mobile-app-development/IOS-app-developmentq"
>Android App Development</a
>
</li>
<li>
<a routerLink="mobile-app-development/Flutter-app-development"
>Flutter App Development</a
>
</li>
</ul>
</li>
<li>
<div class="openLevel js-openLevel">
Web Development
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li class="closetab" style="background: #ae0000">
<a routerLink="web-app-development">Web Development</a>
</li>
<li>
<a routerLink="web-app-development/ReactJS-development"
>ReactJs Development</a
>
</li>
<li>
<a routerLink="web-app-development/Angular-development"
>Angular Development</a
>
</li>
<li>
<a routerLink="web-app-development/php-development"
>PHP Development</a
>
</li>
<li>
<a routerLink="web-app-development/laravel-development"
>Laravel Development</a
>
</li>
<li>
<a routerLink="web-app-development/NodeJS-development"
>NodeJs Development</a
>
</li>
<li>
<a routerLink="web-app-development/Python-Django-development">
Django/Python Development</a
>
</li>
</ul>
</li>
<li>
<div class="openLevel js-openLevel">
Game Development
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li class="closetab" style="background: #ae0000">
<a routerLink="game-app-development">Game Development</a>
</li>
<li>
<a routerLink="game-app-development/IOS-game-development"
>IOS Game Development</a
>
</li>
<li>
<a routerLink="game-app-development/Android-game-development"
>Android Game Development</a
>
</li>
</ul>
</li>
<li>
<div class="openLevel js-openLevel">
User Experience
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li style="background: #ae0000">
<a routerLink="user-experience">User Experience </a>
</li>
<li>
<a routerLink="user-experience/wireframe-design">Wireframe</a>
</li>
<li>
<a routerLink="user-experience/ui-ux-design">UI/UX Design</a>
</li>
</ul>
</li>
<li>
<div class="openLevel js-openLevel">
Latest Technologies
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li class="closetab" style="background: #ae0000">
<a routerLink="/latest-app-trends">Latest Technologies </a>
</li>
<li class="closetab">
<a routerLink="/latest-app-trends/IOT-development">IOT</a>
</li>
<li class="closetab">
<a routerLink="latest-app-trends/Blockchain-development"
>Blockchain</a
>
</li>
<li class="closetab">
<a routerLink="/latest-app-trends/augmented-virtual-Reality"
>AR/VR</a
>
</li>
</ul>
</li>
</ul>
</li>
<li class="">
<a
class="nav-link quote_btn"
[routerLink]="'/apply'"
routerLinkActive="active-link"
>Get Quote</a
>
</li>
</div>
</ul>
</nav>

Hey Use this Another Method
-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);
TRY THIS

Z-index should be set for elements on the same level.
You should set the z-index on the parent's elements so that they will not be reset by their parent's z-index.
To fix your issue, you could set the z-index of #main-wrapper which is the parent of .pushNav to any number that is higher than <app-home>. Here's what I've tried on my device.

How can i make active background color for two elements in nav menu

I have a vertical navbar menu with 2 blocks.
First is nav with icons, second is text of menu.
They have a different background colors. How i can make one background color for two active nav blocks?
design of menu
<div class="menu__icons">
<ul class="menu__list">
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item" href="#">First</a></li>
<li><a class="menu__item" href="#">Second</a></li>
<li><a class="menu__item" href="#">Third</a></li>
<li><a class="menu__item" href="#">Fourth</a></li>
</ul>
</div>
</div>
https://jsfiddle.net/levan563/1g5ucmwq/2/

Well basically if you want to toggle .active and you don't want two separate markup of list.
Notice that font-awesome is for demonstration purposes only.
.menu__item {
width: 250px;
height: 50px;
text-align: left;
}
.menu__item.active {
background-color: #e9ebfd;
}
.menu__item.active .menu__icon {
background-color: #e9ebfd;
border-left: 4px solid #2c39ec;
}
.menu__item.active .menu__title {
background-color: #e9ebfd;
}
.menu__item a:hover {
text-decoration: none;
}
.menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fafafa;
color: #2c39ec;
}
.menu__title {
display: inline-block;
padding-left: 20px;
color: #777777;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
<ul class="menu__list list-unstyled">
<li class="menu__item active">
<a href="#">
<div class="menu__icon">
<i class="fa fa-tachometer-alt"></i>
</div>
<div class="menu__title">Main Dashboard</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-user"></i>
</div>
<div class="menu__title">Profile</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-bell"></i>
</div>
<div class="menu__title">Finances</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-calendar"></i>
</div>
<div class="menu__title">Titles</div>
</a>
</li>
</ul>
</nav>
Related Fiddle https://jsfiddle.net/mhrabiee/dojL9get/28/

As I understand take active class for both block's li and try to use font, svg icon or transparent background images instead of block images
.menu__list .active {
background-color: red;
}
<div class="menu__icons">
<ul class="menu__list">
<li><a class="menu__item active" href="#">
<img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
</a></li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item active" href="#">First</a></li>
</ul>
</div>

Its doable using jQuery.
Assuming you have same number of list items in both blocks,
$(function(){
$('.menu__list li').on('click', function() {
var idx = $(this).index();
$('.menu__list li').removeClass('active');
$('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});
also add .active class in css and give needed style to li items also
.active{
/**your style**/
}
.active > a{
}
.active img{
}

Social Media Icons Responsive

I can't seem to make my social media icons be responsive when in cellular mode. it stays to the very corner of the right. I would like it to be centered /horizontally right under the bio section. I'm finding it a bit difficult because I'm not using bootstrap for this feature, just basic ul list. If anyone can help, i would appreciate it.
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="about1.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="index.php" title="Email">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>About</h1>
</div>
<main>
<div class="row">
<div class="col"><p> <h5> Eddie Munoz is an Austin, Texas based character artist currently working with QC Games, a video game development company. He previously worked at Carbine Studios in Aliso Viejo, California helping create various creatures, armors, mounts, and weapons for WildStar; a free-to-play online game. Be sure to follow him on instagram for his latest projects. <h5><br></div>
<!-- <img src="images/hammer.gif" alt="" width="200" height="275"><-->
</div>
</main>
<footer class="page-footer">
<ul>
<li>
<i class="fa fa-instagram fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-linkedin-square fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-twitter fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-deviantart fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-paint-brush fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<a href="index.php" title="Email">
<i class="fa fa-envelope-o fa-lg" aria-hidden="true" style="color:white"></i></a>
</ul>
</li>
</footer>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
position: center;
}
h5{
color: #FFF;
margin: 10px 75px 10px;
padding-left: 2px;
padding-right: 2px;
font-size: .9em;
}
.row{
display: flex;
flex-flow: column wrap;
margin-left: .6em;
margin-right: .6em;
}
.col{
flex: 1;
margin: .5em;
padding: 15px 75px 15px;
color: #FFF;
font-size: .9em;
}
.page-footer{
display:flex;
margin: 10px 475px 10px;
list-style-type: none;
}
.page-footer ul{
align-items:center;
}
.page-footer ul li{
display:inline-block;
margin-right: 20px;
margin-left: 20px;
}
#media screen and (min-width: 640px){
.row{flex-flow: row wrap;}
main .col:nth-child(2){flex: 1;}
}
#media screen and (min-width: 960px){
main .col:nth-child(2){flex: .40;}
}
main {flex: 1;}

try this (i gave the ul a class to avoid affecting other uls in the page) :
ul.social-icons {
display: block;
margin: 0 auto;
text-align: center
}
ul.social-icons li {
display: inline-block;
}

How to keep a div stayed in same position css

Well, I have a category panel picture and I am trying to create it into HTML.
I have tried this code but I hover over a category a sub_category panel appears but every panel seems to have margin at top. I want to have every panel same position just like in picture.
I tried top: 0 but it didn't have any affect. Can anyone help?
.category_nav {
height: 40px;
margin-top: 28px;
}
.category_nav_ul {
list-style-type: none;
padding: 0;
}
.category_nav_ul>li {
display: inline-block;
}
#category_nav_ul_category {
width: 380px;
cursor: pointer;
}
#category_nav_div {
margin-top: 5px;
width: 380px;
position: absolute;
background-color: white;
padding-bottom: 10px;
}
.category {
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 1px;
margin-left: 0 !important;
border-radius: 0 !important;
border: 0 !important;
}
.category:hover {
border: 2px;
background: linear-gradient(to right, red 0px, #E5002B 3px, transparent 3px);
background-color: white;
border-top: 1px solid grey !important;
border-bottom: 1px solid grey !important;
}
.fa-chevron-right {
font-weight: 100px !important;
font-size: 10px !important;
}
.left-menu-ul {
list-style: none;
}
.left-mega-menu {
background: #fff none repeat scroll 0 0;
left: 90%;
position: absolute;
top: 0;
width: 470px;
opacity: 0;
visibility: hidden;
z-index: 2345;
transition: .3s;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 60px;
}
.left-menu ul li:hover>.left-mega-menu {
opacity: 1;
visibility: visible;
left: 100%;
}
.sub_categories {
border-radius: 0 !important;
padding-top: 6px;
padding-bottom: 6px;
border-left: 2px solid #E5002B;
border-top: 0px !important;
border-right: 0px !important;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
<div class="left-menu collapse in" id="left-menu">
<nav>
<ul class="left-menu-ul list-group">
<li class="category list-group-item">
<i class="fa fa-camera fa-fw"></i>
<a href="/mystore/category/Camera">Camera
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Camera/sub_cat/">
<li class="list-group-item sub_categories">Camera</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Clothes">Clothes
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Clothes/sub_cat/">
<li class="list-group-item sub_categories">Clothes</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-mobile fa-fw"></i>
<a href="/mystore/category/Mobiles">Mobiles
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Mobiles/sub_cat/">
<li class="list-group-item sub_categories">Mobiles</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Tablet/sub_cat/">
<li class="list-group-item sub_categories">Tablet</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Graphics Cards">Graphics Cards
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Graphics Cards/sub_cat/">
<li class="list-group-item sub_categories">Graphics Cards</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Computer/sub_cat/">
<li class="list-group-item sub_categories">Computer</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/DVDs/sub_cat/">
<li class="list-group-item sub_categories">DVDs</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Laptop/sub_cat/">
<li class="list-group-item sub_categories">Laptop</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-television fa-fw"></i>
<a href="/mystore/category/Television">Television
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Television/sub_cat/">
<li class="list-group-item sub_categories">Television</li>
</a>
</div>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>

Remove position relative from category li and apply it to its parent
.left-menu-ul {
list-style: none;
position: relative;
}
fiddle

Dropdown menu disappears when I try to hover it

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>