Greetings, everyone! This is my debut post here so bear with me if it's not presented in the correct format.
Currently, I am deep into creating a website using HTML, CSS, and just a hint of JavaScript. My primary focus right now is on building the home page for this site. Within this homepage, I have successfully implemented a hamburger menu. When activated, it reveals a list containing "Home," "Contact," "Features," and more. This aspect of the design works perfectly fine.
However, I ran into a roadblock when attempting to add content boxes below the video section. Although my code seemed flawless, upon previewing the site, I noticed that none of the boxes were visible where they should be. Strangely enough, upon opening the hamburger menu, I could see that the boxes and accompanying text were tucked away in there.
I urgently seek advice on how to rectify this issue by keeping the boxes out of the menu and positioning them at the bottom of the page instead. Your help would be greatly appreciated.
For reference, I have attached an image depicting the current layout:
const menuToggle = document.querySelector('.toggle')
const showCase = document.querySelector('.showcase')
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active')
showCase.classList.toggle('active')
})@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: black;
color: white;
z-index: 2;
transition: 0.8s;
}
.showcase header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
text-transform: uppercase;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url('menu.png');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active {
background: url('menu.png');
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.showcase.active {
right: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// Remaining CSS properties go here...
}Despite my attempts to troubleshoot by removing the JavaScript segment, adjusting element spacing, and inspecting the CSS attributes, the issue persists. It baffles me as I am unable to pinpoint where things went wrong. Any guidance or insights provided would be immensely valuable.