I've been experimenting with the navbar design featured in the Youtube video titled "Animated Responsive Navbar with CSS" by Fireship. My goal is to have the items in my navbar aligned horizontally at the center. Here's a snippet of the HTML structure:
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Home</span>
Below is the CSS I'm using:
.navbar {
position: fixed;
background-color: var(--bg-primary);
transition: width 600ms ease;
overflow: auto;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.nav-item {
width: 100%;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: none;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed);
}
Based on my understanding, setting these properties should horizontally center the items:
- Set .navbar-nav to display:flex
- Set .navbar-nav to flex-direction:column
- Set .navbar-nav to align-items center;
However, the result I get looks like this:
https://i.sstatic.net/ejyfV.png
If anyone can offer some assistance, I would greatly appreciate it.