I've tried now quite a time to figure out, why the closing symbol (X) is not displayed if I open my navbar.
If it is closed, everything seems fine.
In the Google Chrome dev tools the icon is still on the page, but in front-end it is not visible.
My environment:
- macOS Monterey
- VS Code with Live Preview extension
- Google Chrome
Is there something I don't see?
Here is my index.html
file (I know, the JavaScript should be in an own file ;-P):
section {
background-color: blue;
padding: 20px;
/* height: 40px; */
display: flex;
justify-content: space-between;
align-items: center;
}
img {
height: 30px;
width: auto;
}
.toggle-box a img {
filter: invert(1);
}
.img.menu.hide {
display: none;
}
img.close {
display: none;
}
img.close.show {
display: flex;
/* z-index: 9999; */
}
nav.navigation {
display: none;
}
nav.navigation.active {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
/* z-index: 1111; */
}
nav.navigation.active a {
padding: 20px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.phone-logo a img {
filter: invert(1);
}
<section>
<div >
<a onclick="showMenu()" href="#">
<img src="menu-outline.svg" />
<img src="close-outline.svg" />
</a>
</div>
<nav >
<a href="#">Sec 1</a>
<a href="#">Sec 2</a>
<a href="#">Sec 3</a>
<a href="#">Sec 4</a>
</nav>
<div >
<a href="#">
<img src="call-outline.svg" />
</a>
</div>
</section>
<script>
function showMenu() {
document.querySelector(".menu").classList.toggle("hide");
document.querySelector(".close").classList.toggle("show");
document.querySelector(".navigation").classList.toggle("active");
}
</script>
</body>
CodePudding user response:
Elements which fall later in the document have a higher stacking order, meaning that they're layered over earlier elements. You can rearrange your markup to resolve that.
section {
background-color: blue;
padding: 20px;
/* height: 40px; */
display: flex;
justify-content: space-between;
align-items: center;
}
img {
height: 30px;
width: auto;
}
.toggle-box a img {
filter: invert(1);
}
.img.menu.hide {
display: none;
}
img.close {
display: none;
}
img.close.show {
display: flex;
/* z-index: 9999; */
}
nav.navigation {
display: none;
}
nav.navigation.active {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
/* z-index: 1111; */
}
nav.navigation.active a {
padding: 20px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.phone-logo a img {
filter: invert(1);
}
<section>
<nav >
<a href="#">Sec 1</a>
<a href="#">Sec 2</a>
<a href="#">Sec 3</a>
<a href="#">Sec 4</a>
</nav>
<div >
<a onclick="showMenu()" href="#">
<img src="menu-outline.svg" />
<img src="close-outline.svg" />
</a>
</div>
<div >
<a href="#">
<img src="call-outline.svg" />
</a>
</div>
</section>
<script>
function showMenu() {
document.querySelector(".menu").classList.toggle("hide");
document.querySelector(".close").classList.toggle("show");
document.querySelector(".navigation").classList.toggle("active");
}
</script>
</body>
CodePudding user response:
It's just a matter of z-index
for the .toggle-box
.
section {
background-color: blue;
padding: 20px;
/* height: 40px; */
display: flex;
justify-content: space-between;
align-items: center;
}
img {
height: 30px;
width: auto;
}
.toggle-box a img {
filter: invert(1);
}
.img.menu.hide {
display: none;
}
img.close {
display: none;
}
img.close.show {
display: flex;
/* z-index: 9999; */
}
nav.navigation {
display: none;
}
nav.navigation.active {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
/* z-index: 1111; */
}
nav.navigation.active a {
padding: 20px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.phone-logo a img {
filter: invert(1);
}
.toggle-box {
z-index: 1;
}
<section>
<div >
<a onclick="showMenu()" href="#">
<img src="menu-outline.svg" />
<img src="close-outline.svg" />
</a>
</div>
<nav >
<a href="#">Sec 1</a>
<a href="#">Sec 2</a>
<a href="#">Sec 3</a>
<a href="#">Sec 4</a>
</nav>
<div >
<a href="#">
<img src="call-outline.svg" />
</a>
</div>
</section>
<script>
function showMenu() {
document.querySelector(".menu").classList.toggle("hide");
// document.querySelector(".close").classList.toggle("show");
document.querySelector(".navigation").classList.toggle("active");
}
</script>
</body>