Can you help me find a way to bring one element to the forefront even within a div with "display: flex" and "justify-content: space-around" properties? It seems that the typical z-index property is not working due to the absence of fixed/relative/absolute positioning on the element.
Is there a workaround to increase the z-value of this particular element?
I am trying to ensure the visibility of the hamburger menu when the navigation is opened. Below is the CSS code snippet that I am using (Note: it appears unusual because I am utilizing Sass):
const welcomeText = document.querySelector('.welcome-text');
const logo = document.querySelector('.logo');
const hamburger = document.querySelector('.hamburger');
const arrow = document.querySelector('.down-arrow');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
hamburger.classList.toggle('open');
})@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
/* Rest of the CSS styling removed for brevity */
/* Script and HTML snippets also omitted */