Issue
I am trying to create a navigation bar. When the screen size becomes a certain size, I want the tab links to disappear and a button appears to make them expand. This is working as intended, however while I have pushed the button and I have the expanded list, if my screen size changes and increases above the threshold the changes still apply and I can't find a way to remove them.
The code:
HTML:
<nav>
<div class="navList">
<ul>
<li class = "navImg"><img src="./Images/Logo (1).png" alt="Logo" /></li>
<li><a href="#">Home</a></li>
<li><a href="#">Collection</a></li>
<li><a href="#">Wholesale</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button class="navDropdown">☰</button>
</div>
</nav>
CSS:
.navList {
display: flex;
background-color: #002F63;
}
.navList ul {
display: flex;
margin-bottom: 0;
}
.navList ul li {
list-style: none;
margin: 1.7rem;
margin-top: 2.5rem;
font-size: 1.5rem;
}
.navImg {
padding: 0;
margin: 0 !important;
margin-left: 1rem !important;
margin-right: 1rem !important;
}
.navList ul li a {
text-decoration: none;
color: white;
}
.navDropdown {
align-self: right;
margin-left: auto;
background-color: #002F63;
border: none;
color: white;
padding-right: 1.5rem;
font-size: 1.5rem;
display: none;
}
@media (max-width: 813px) {
.navList ul{
display: none;
}
.navDropdown {
display: inline-block;
}
}
Javascript:
$(".navDropdown").on("click", function () {
var x = $(".navList ul").css("display");
if (x === "none") {
$(".navList ul").css("display","block");
} else {
$(".navList ul").css("display","none");
}
});
I want the navigation bar to return to normal when increasing the screensize after I have pressed the button, but it remains as expanded.
Solution
I probably have too much CSS; as you can tell I have a preference for kebab my-class
css style names.
No need for jQuery here so I just used plain JavaScript to toggle a show-me
class and put that in the media query where the width is narrow so the button "overrides" the media query that way.
Note I put a small font on the img
so it did not look bad when no image was present.
I put some ugly borders on just to show what is where.
Converted the px to em and set the normal browser default of 16px = 1em
var hamburger = document.querySelector(".navDropdown");
hamburger.addEventListener("click", handleClick);
function handleClick(event) {
const navBlock = event.target.closest(".nav-container")
.querySelector('.nav-block');
navBlock.classList.toggle('show-me');
}
body {
font-size: 16px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav-wrapper {
--nav-grid-min-size: 5em;
--nav-background-color: #002F63;
}
.nav-wrapper,
.nav-wrapper * {
margin: 0;
padding: 0;
color: #ffffff;
}
.nav-container {
min-height: 3em;
display: grid;
/* 4 columns- space left, menu, burger, space right */
grid-template-columns: 1em 1fr 2em 2em;
grid-template-rows: minmax(auto, auto);
/* named areas just for clarity of what goes where */
grid-template-areas: ". menu burger .";
gap: 1em;
align-items: center;
background-color: var(--nav-background-color);
}
.nav-container .nav-block {
border: solid pink 1px;
list-style-type: none;
grid-area: menu;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 1em;
column-gap: 1.7em;
min-height: 0;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.nav-container .nav-block li {
width: min-content;
white-space: nowrap;
font-size: 1.5rem;
border: solid yellow 1px;
}
.navImg * {
font-size: 0.5em;
}
.nav-container .nav-block li a {
text-decoration: none;
}
.navDropdown {
background-color: var(--nav-background-color);
border: none;
border: solid cyan 1px;
font-size: 1.5rem;
}
.nav-hamburger {
grid-area: burger;
margin-left: auto;
text-align: center;
background-color: var(--nav-background-color);
}
.nav-wrapper>.nav-container>.nav-block.navDropdown.show-me {
display: flex!important;
}
@media screen and ( width > 40em) {
.nav-wrapper>.nav-container .nav-hamburger {
display: none;
}
.nav-wrapper>.nav-container .nav-block {
display: flex;
}
}
@media screen and (width <=40em) {
.nav-wrapper>.nav-container .nav-hamburger {
display: block;
}
.nav-wrapper>.nav-container .nav-block {
display: none;
}
.nav-wrapper>.nav-container .nav-block.show-me {
display: flex!important;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<nav class="nav-wrapper">
<div class="navList nav-container">
<ul class="nav-block ">
<li class="navImg"><img src="./Images/Logo (1).png" alt="Logo" /></li>
<li><a href="#">Home</a></li>
<li><a href="#">Collection</a></li>
<li><a href="#">Wholesale</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button class="navDropdown nav-hamburger">☰</button>
</div>
</nav>
Answered By - Mark Schultheiss
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.