/* For Mobile Devices */
@media screen and (max-width: 768px) {
/* The menu container */
.hamburger-menu {
position: fixed; /* Fixed to the screen */
top: 0; /* Align with the top of the viewport */
left: 0; /* Align with the left of the viewport */
width: 100%; /* Full width of the viewport */
height: 100%; /* Full height of the viewport */
background-color: #1f2c44; /* Menu background color */
z-index: 9999; /* Ensure it appears above all content */
display: none; /* Initially hidden */
flex-direction: column; /* Stack items vertically */
justify-content: center; /* Center items vertically */
align-items: center; /* Center items horizontally */
padding: 20px; /* Padding around the menu */
box-sizing: border-box; /* Include padding in size */
overflow-y: auto; /* Scrollable if content exceeds viewport */
}
/* Show the menu when opened */
.hamburger-menu.open {
display: flex; /* Make menu visible */
}
/* Hamburger icon */
.hamburger-icon {
position: fixed;
top: 15px;
right: 15px;
z-index: 10000; /* Ensure it's above everything */
background-color: #ff9900; /* Your brand color */
width: 40px;
height: 40px;
cursor: pointer;
}
/* Menu items styling */
.hamburger-menu ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
.hamburger-menu ul li {
padding: 15px 0;
width: 100%; /* Full width for better alignment */
}
.hamburger-menu ul li a {
color: #ffffff; /* White text for contrast */
text-decoration: none;
font-size: 1.5rem; /* Readable on mobile */
display: block; /* Ensure full-width clickable area */
}
/* Prevent background scroll when menu is open */
body.menu-open {
overflow: hidden;
}
}
Oops! Sorry!!
This site doesn't support Internet Explorer. Please use a modern browser like Chrome, Firefox or Edge.
At Boon Box Productions, we are proud to have contributed to the sound design and post-production of a diverse range of films and projects. Explore some of the titles we've helped bring to life.
