Hi,
Make these changes:
In the normal css make the menu-icon display:none and then remove the hide-nav rule from the desktop css.;
#menu-icon{
display: none;
width: 40px;
height: 40px;
padding: 0px 0px 0 0;
background: url(img/nav.png) center;
}
/* remove this
.hide-nav{
display: none
}
*/
In the 1000px media query remove the hover rule and then using the hide-nav class that you are adding with js you can show the nested ul. Also remove the comma separated :active rule as it does nothing.
nav ul /*, nav:active ul*/ {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
background: -moz-linear-gradient(top, #0e3f00 0%, #098900 94%, #0ee000 100%);
background: -webkit-linear-gradient(top, #0e3f00 0%,#098900 94%,#0ee000 100%);
background: linear-gradient(to bottom, #0e3f00 0%,#098900 94%,#0ee000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e3f00', endColorstr='#0ee000',GradientType=0 );
right: 20px;
top: 60px;
width: 45%;
}
/* remove
nav:hover ul{
display: block;
}
*/
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
}
/* add this */
.hide-nav ul{
display:block;
}
With those changes in place the hamburger will only appear on less than 1000px screens and will be activated on click only.
Note that because you are using position:fixed for the menu on small screens the menu will be unusable for any small screens that are not tall enough to accommodate it so consider shortening the menu or perhaps arrange for a scrollbar to appear based on the viewport height.
e.g.
nav ul /*, nav:active ul*/ {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
background: -moz-linear-gradient(top, #0e3f00 0%, #098900 94%, #0ee000 100%);
background: -webkit-linear-gradient(top, #0e3f00 0%,#098900 94%,#0ee000 100%);
background: linear-gradient(to bottom, #0e3f00 0%,#098900 94%,#0ee000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e3f00', endColorstr='#0ee000',GradientType=0 );
right: 20px;
top: 60px;
width: 260px;
max-height:calc(100vh - 100px);
overflow-y:auto;
overflow-x:hidden;
}
The 45% width you had would be useless on 320px screens so set a px value for the menu as i have done above.
A couple of pointers with your code:
Don’t cancel pinch and zoom on mobile:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
The maximum scale should be removed as it will stop people pinching and zooming on mobile and I always need to be able to do that.
The light green colour of your body text is impossible for me to read. Run the code through a contrast checker to make sure its readable.
You have many many validation errors in your css and html so make extensive use of the w3c validators and clear all those errors and typos.
https://jigsaw.w3.org/css-validator/
For example you have done this about half a dozen times where you start width an h4
tag but close it with an h3 tag!
<h4>
LOVE
</h3>
Headings must also be used in a logical order and you cannot jump from an h2 to an h4 and indeed you don’t have an h1 so you can’t have an h2 or any other headings. You must start with an h1 and then use a logical hierarchy.
You start a section here and immediately nest another section and never close the first section either.
<section class="inner-wrapper-3">
<section class="shop" id="store"> <br>
<br>
<br>
That doesn’t make semantic sense and sections are usually coupled with headings of an appropriate value.
Also never use breaks to make space as they are not meant for that use at all. Use margins or padding to create space. You have used breaks all over the place and you will rarely use a break in a web page if you have constructed carefully. Breaks are only used when you want to split a line such as in a poem or address. It is never used to make space or split paragraphs.
Your wrapper div is also missing a closing tag.
You cant put part of a table in a section element?
<section class="one-fourth" id="TRUST">
<td><i class="fa fa-star fa-1x" style="color: #affc67;"></i></td>
Table elements must go inside a proper table structure but you shouldn’t be using them here anyway.
I think that’s enough to be getting on with 