I have made responsive menu. On desktop, the navigation is shown horizontally in header: Home, Gallery, About, etc. For smaller screens I have made hamburger icon and on click, the navigation should expand. With CSS I hid the navigation when on smaller screen and stylized how it will look when expanded - it will be shown vertically.
With javascript I made a function to expand the navigation when you click on hamburger icon and to collapse it when you click again.
It works.
The problem IS: If I click on hamburger icon to show the navigation and then again to hide it, when I enlarge the window of the browser to a desktop size, the navigation won't show again horizontally in header, it remains hidden.
Please help!
$('#drawer').click(function() {
$('header nav').toggle(1);
if ($(this).text() == 'Hide') {
$(this).text('Show');
} else {
$(this).text('Hide');
}
}); #drawer {
display: none;
}
header nav {
float: right;
}
nav li {
float: left;
}
@media screen and (max-width: 768px) {
#drawer {
display: inline-block;
float: right;
}
header nav {
display: none;
float: none;
padding-top: 120px;
/* Hamburger icon is in the header on the right side, and nav expands vertically in the center of the screen below the hamburger icon, that's why I put the padding 120px, to make nav below the icon*/
text-align: center;
}
nav li {
float: none;
}
nav li a {
display: inline-block;
margin-left: 0px;
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="drawer" src="images/drawer.png" alt="Drawer">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
</ul>
</nav>You're the first person I've helped on here so I hope I make this clear and it's of actual help.
I believe your problem is with the use of toggle(). This function will add inline styles to your nav element which are impossible to override with CSS without the use of !important.
I have put together a solution using toggleClass() which will not add any inline styles, rather it will apply a class to display your navigation element whilst still allowing for the overriding using your media query's opposing effect. I'd also like to add that I don't really recommend the use of a class that purely does a display: block, but it illustrates the point.
<!DOCTYPE html>
<html>
<head>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<style>
#drawer {
display: none;
}
header nav {
float: right;
}
nav li {
float: left;
}
@media screen and (max-width: 768px) {
#drawer {
display: inline-block;
float: right;
}
header nav {
display: none;
float: none;
padding-top: 120px; /* Hamburger icon is in the header on the right side, and nav expands vertically in the center of the screen below the hamburger icon, that's why I put the padding 120px, to make nav below the icon*/
text-align: center;
}
nav li {
float: none;
}
nav li a {
display: inline-block;
margin-left: 0px;
margin-top: 10px;
}
}
.display {
display: block;
}
</style>
</head>
<body>
<header>
<img id="drawer" src="images/drawer.png" alt="Drawer">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
</ul>
</nav>
</header>
<script>
$('#drawer').click(function() {
$('header nav').toggleClass('display');
if( $(this).text() == 'Hide' ) {
$(this).text('Show');
} else {
$(this).text('Hide');
}
});
</script>
</body>
</html>
I hope this is of use and thank you for being my stackoverflow guinea pig.