mortal harness
Hey guys, this is mostly just an HTML and CSS question. I'm using HTML and CSS to build a responsive navbar. The navbar class change is working when shrinking the window size, but when I open the hamburger menu (defined by the Font Awesome ellipsis icon), some of the menu items are hidden behind the bottom of the navbar, like so:
There are supposed to be six items: Home, Featured, About, Skills, Portfolio, and Contact. However, some of them are hidden behind the lower bounds of the navbar, and I think they're not centered either.
Here is my navbar.astro file:
---
import Item from "/src/layouts/components/navbar/parts/item.astro";
export interface Props {
items: Array<Array<string>>;
}
const { items } = Astro.props as Props;
---
<section class:list={["navbar", ]} id="navbar">
<div class="container row row-center">
<div class="navbar-brand">
<img src="/resources/logos/Logo.png">
<b>Alien Insect</b>
</div>
<div class="navbar-items close">
{items.map((item) => (
<Item title={item[0]} href={item[1]}/>
))}
</div>
<a onclick="toggleNavbar();" class="nav-toggler close"><i class="fa-solid fa-ellipsis"></i></a>
</div>
</section>
In the referenced item.astro:
---
const { title, href } = Astro.props;
---
<a href={href} class="nav-link" data-scroll-to>{title}</a>
Here is the CSS for everything related to the navbar:
/* Navbar */
.navbar {
list-style-type: none;
overflow: hidden;
display: flex;
background-color: var(--opposite-text-color);
position: fixed;
top: 0;
width: 100%;
min-height: 7.5rem;
height: 7.5rem;
z-index: 100;
}
.navbar .container {
position: relative;
}
.navbar .container div {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
}
.navbar .container .navbar-brand {
position: absolute;
left: min(5rem, 7.5%);
font-family: 'Azurite', Impact;
font-size: 1.35rem;
width: 20rem;
display: flex;
align-items: center;
flex-direction: row;
text-decoration: none;
white-space: nowrap;
}
.navbar .container .navbar-brand img {
height: 2.5rem;
width: 2.5rem;
margin: 0 1rem;
}
.navbar .container .navbar-items {
width: calc(100% - 10rem);
position: absolute;
justify-content: right;
right: min(5rem, 7.5%);
}
.navbar .container .navbar-items .nav-link {
text-transform: uppercase;
text-decoration: none;
font-family: 'Kanit Semibold', Arial;
letter-spacing: 0.75px;
font-size: 1.1rem;
color: var(--text-color);
padding: 0.5rem;
margin: 0 0.5rem;
}
.navbar .container .navbar-items .nav-link:hover {
background-color: var(--text-color);
color: var(--opposite-text-color);
}
.navbar .container .nav-toggler {
font-size: 3rem;
display: none;
border: 4px solid rgba(0,0,0,0);
padding: 0.1rem 0.5rem;
border-radius: 1rem;
}
.navbar .container .nav-toggler:hover {
cursor: pointer;
border: 4px solid #fff;
}
@media screen and (max-width: 1100px) {
.navbar .container .navbar-items.close .nav-link {
display: none;
}
.navbar .container .nav-toggler {
position: absolute;
justify-content: right;
right: min(5rem, 7.5%);
display: flex;
}
.navbar .container .navbar-items.open {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 0;
width: 100%;
z-index: 11;
margin-top: 7.5rem;
}
.navbar .container .navbar-items.open .nav-link {
background-color: var(--opposite-text-color) !important;
display: flex;
z-index: 100;
}
}
And finally, I am using a navbar.js file to toggle classes whenever hitting the button:
function toggleNavbar() {
const navbar = document.getElementsByClassName("navbar-items")[0];
const toggler = document.getElementsByClassName("nav-toggler")[0];
if (navbar.classList.contains("close")) {
navbar.classList.remove("close");
navbar.classList.add("open");
}
else if (navbar.classList.contains("open")) {
navbar.classList.remove("open");
navbar.classList.add("close");
}
console.log(navbar);
}
Can someone help me with my problem above. I put a screenshot above to highlight what's going wrong with my responsive navbar. Here it is again, when the navbar-items class is toggled to "open":
forest estuary
The style overflow: hidden on the .navbar class is hiding overflowing content
mortal harness
The style `overflow: hidden` on the `.navbar` class is hiding overflowing conten...
Omfg dude I was skimming through my code and didn't even catch that line. I have no idea why I put that there to begin with. Tysm! <3
Time and time again, you're Metro Man coming to the rescue