Develop Reference

how to hide sidebar when mouse cursor goes on menubar

I want to hide sidebar when mouse cursor goes on menu bar which is in navigation bar to hide the sidebar.
I tried to hide it many ways but it did not worked for me so looking for any alternative.
Side should be hide once the mouse curser is on the menu bar
Here is my CSS code :
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.navbar {
width: 100%;
height: 78px;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
text-align: center;
margin-inline-start: 45px;
padding: 26px;
color: white;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #04AA6D;
}
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 150px;
top: 78px;
height: 100%;
background: #4b4276;
padding: 0px 0px;
position:fixed;
transition: all 0.5s ease ;
}
.wrapper .sidebar ul li{
padding: 25px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(15, 3, 85, 0.05);
text-align: center;
transition: 0.3s;
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 45px;
}
.sub-menu-1{
display: none;
}
.wrapper .sidebar ul li:hover .sub-menu-1 {
display: block;
position: absolute;
left: 150px;
width: 250px;
top: 0px;
height: 92%;
border-radius: 2px;
box-shadow: 2px 2px 10px ;
background-color:#ffffff;
}
.wrapper .sidebar ul li .dropdown{
position: relative;
}
.wrapper .sidebar ul li:hover{
background-color:#d59bf6 ;
}
.wrapper .sidebar ul li:hover a{
color: rgb(70, 9, 105);
}
tried to hide the side bar but was unable to do so

The code for my navbar does not work properly

I'm a beginner trying to code a navbar in a practice website but I can't get the final product right.
My navbar is supposed to line up horizontally along the top of the page and then be follow the page as you scroll with a black shadow backdrop. Currently when you load the page, the words line up vertically on the right side, and then condense when you scroll. I also have a logo in the top left that shrinks way too small. Finally, when when you shrink the page, a hamburger icon pops up in the top right that is supposed to show you the menu options, however it no longer works. It's like a cycle with this page, I fix one thing and break another. I am doing this just for fun because I'm trying to learn but now I'm getting frustrated, Thanks!
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
$(document).ready(function() {
$(".menu i").click(function() {
$("nav ul").toggleClass("active")
})
})
#import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Hairline|Oswald|Raleway&display=swap');
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .5s;
}
nav.black {
background: rgba(0, 0, 0, .8);
height: 80px;
padding: 10px 50px;
}
nav.logo {
float: left;
}
nav .logo img {
height: 80px;
transition: .5s;
}
nav.black .logo img {
padding: 20px;
height: 60px;
}
nav ul {
float: right;
margin: 0;
padding: 0px;
display: flex;
text-shadow: 2px 2px 4px #000000;
}
nav ul li {
List-style: none;
}
nav ul li a {
Line-height: 80px;
color: #fff;
padding: 5px 20px;
font-family: 'Raleway', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: .5s;
}
nav.black ul li a {
color: #fff;
Line-height: 20px;
}
nav ul li a.active,
nav ul li a:hover {
color: #fff;
background: #008cff;
}
.responsive-bar {
display: none;
}
#media (max-width: 800px) {
.responsive-bar {
display: block;
width: 100%;
height: 60px;
background: #262626;
position: fixed;
top: 0;
Left: 0;
padding: 5px 20px;
box-sizing: border-box;
z-index: 1;
}
.responsive-bar .logo img {
float: left;
height: 50px;
}
.responsive-bar .menu i {
float: right;
color: #fff;
margin: 0;
padding: 0;
Line-height: 50px;
cursor: pointer;
text-transform: uppercase;
}
nav {
padding: 60px;
}
nav.black {
display: none;
background: #262626;
height: 60px;
padding: 0;
}
nav .logo {
display: none;
}
nav ul {
position: absolute;
width: 100%;
top: 60;
Left: 0;
background: #262626;
float: none;
display: none;
}
nav ul.active {
display: block;
}
nav ul li {
width: 100%
}
nav ul li a {
display: block;
padding: 15px;
width: 100%;
height: 60px;
text-align: center;
Line-height: 30px;
color: #fff;
}
}
* {
box-sizing: border-box;
}
.main {
height: 1000px;
padding-left: 20px;
padding-right: 100px;
}
<div class="responsive-bar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="menu">
<i class="fa fa-bars"></i>
</div>
</div>
<nav>
<div class="logo">
<img src="img/logo.png">
</div>
<ul>
<div class="active">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="main">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

mobile view menu issue?

I implemented the code below, I'm facing an issue on mobile view when clicking the menu button on mobile didn't show the menu but if I didn't scroll down the menu works,
how can i fix this issue on mobile view
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
$("body").toggleClass("hidden");
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.centered-logo').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
})
body{height: 3000px;
margin: 0;
padding: 0;
font-family: monospace;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
.hidden{
overflow: hidden;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
top:0;
display: block;
position: fixed;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">hola</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
I have on mobile view an issue when scroll down and click menu button nothing appear but when I was at the to when click menu will appear the menu item
all I need is when scroll down and up the menu appears
how can I fix this issue

The issue is because you set overflow: hidden to your body, while the nav is part of the page flow. The nav will always be offset relative to it's parent.
Here's an example where overflow: hidden is disabled:
http://jsfiddle.net/u9L50243/ (Toggle the menu and then scroll - You'll notice the navigation scrolls in to, and out of the viewport)
The easiest fix is just to apply position: fixed to your nav bar, in addition to the .responsive-bar.
For example: http://jsfiddle.net/ebcvqds7/

navbar responsive issue when resize the browser width?

i have an issue for the responsive navbar, when i resize the browser for the mobile view and open then close the menu button, after that make the browser full screen for the big screen view the navbar will disappear
any help for that issue
i need to add another feature to fix the navbar when scroll down but when scroll on the mobile the menu it looks messed up
below my code(on snippet)
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
});
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

As per your html structure you have to add below code to your css
#media (min-width:768px){
nav{
display: block !important;
}
}
Using this you don't have to make any changes in your html and css.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
});
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
#media (min-width:768px){
nav{
display: block !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

You also need to update your navigation when the window is resized. Kindly check. Hope this is helpful to you. Just made a update in jquery.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
});
$( window ).resize(function() {
if($(window).width() > 767) {
$("nav").slideDown(800);
}
});
});
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
display: block
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

Please check the below line of code to add image above nav and make header sticky.
Script
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
$("nav").toggleClass("fixed_nav");
$(".responsive-bar").toggleClass("addtop");
});
});
$(window).scroll(function(){
if($(window).width() > 767) {
if ($(window).scrollTop() >= 150) {
$('nav').addClass('fixed-header');
}
else {
$('nav').removeClass('fixed-header');
}
}
else {
if ($(window).scrollTop() >= 150) {
$('.responsive-bar').addClass('fixed-header');
}
else {
$('.responsive-bar').removeClass('fixed-header');
}
}
});
HTML
<div class="img-wrapper">
<img src="https://via.placeholder.com/1250x150">
</div>
<nav class="nav-bar">
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
.............
CSS
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
img {
display: none;
}
.nav-bar.fixed_nav{
display: none;
position: fixed;
width: 100%;
left: 0px;
right: 0px;
top: 0px;
}
.fixed-header.addtop {
top: 98px;
}
}
#media (min-width:768px){
nav{
display: block !important;
}
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

Hamburger icon in responsive nav bar not functioning properly

When my navigation bar is viewed at the tablet/mobile size and the hamburger icon is clicked, it jumps to the left and a strange 'gap' appears underneath my navigational tabs. Can you please help me solve this? This is my first time asking a question here and writing HTML... thanks in advance
/* NAVIGATION MENU */
.icon img {
margin-top: 2.5px;
}
.navbar {
padding-left: 0%;
background-color: #454242;
text-align:center;
}
ul.menu {
height: 43px;
background-color: #454242;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
transiton: 1.0s;
font-family: "Gill Sans", Helvetica, Arial, sans-serif;
display:inline-block;
text-align: center;
}
ul.menu li {
float: left;
display: inline;
}
ul.menu li a {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding: 10px 20px;
text-decoration: none;
transition: 0.5s;
font-size: 17px;
height: 23px;
}
ul.menu li a:hover {
background-color: #FFFFFF;
color: black;
}
ul.menu li a:active {
background-color: #FFFFFF;
color: black;
}
ul.menu li.icon {
display:none;
}
#media screen and (max-width: 680px) {
ul.menu li:not(:first-child){
display:none;
margin: auto;
float: left;
}
ul.menu li.icon {
display: inline;
float: left;
position: absolute;
left: 0px;
text-align: left;
}
}
#media screen and (max-width: 680px) {
.navbar {
padding-left: 0%;
}
ul.menu.responsive li.icon {
float: left;
position: absolute;
left: -10px;
text-align: left;
color: black;
}
ul.menu.responsive{
position: relative;
height: 258px;
transition: 1.0s;
width: 100%
}
ul.menu.responsive li{
float: none;
display: inline;
}
ul.menu.responsive li a{
display:block;
text-align: center;
}
}
<!--NAVIGATION BAR-->
<div class="navigation col-12">
<div class="navbar">
<ul class="menu">
<li class="icon">
☰</li>
<li> Home</li>
<li> Eat</li>
<li> Shop</li>
<li> Discover</li>
<li> Edge Club</li>
<li> Contact</li>
</ul>
</div>
</div>
<script>
function dropdownMenu() {
document.getElementsByClassName("menu")[0].classList.toggle("responsive");
}
</script>

ul.menu.responsive li.icon {
float: left;
position: absolute;
/* left: -10px; */ REMOVE
text-align: left;
color: black;
}