1

My SCSS isn't working correctly. It should center the links of the navbar component I'm trying to make and not the logo. The css doesn't center them both. image

The following code is my css (SCSS):

.navbar {
  background-color: black;
  display: flex;
  align-items: center;
  padding: 1rem;
}

.name {
  font-family: "Marcellus", sans-serif;
  font-size: 2rem;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;

  .item {
    margin-left: 1rem;
  }

  .link {
    color: white;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

The following is my html code (Astro):

---
import './Navbar.scss'

export interface Props {
  links: {
    title: string;
    href: string;
  }[]
}

const { links } = Astro.props;
---

<nav class="navbar">
  <div class="name">
    <a class="text-gradient" href="/">MysticalLira</a>
  </div>
  <div class="center">
    <ul class="links">
      {links.map(link => (
        <li class="item">
          <a class="link" href={link.href}>{link.title}</a>
        </li>
      ))}
    </ul>
  </div>
</nav>

Did I do something wrong?

Mart
  • 11
  • 3

1 Answers1

0

Flexbox automatically makes things as small as possible to fit the content. So you need to tell your .center to grow to fill the remaining space in the .navbar box.

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

Be sure to use the inspector in your browser's dev tools to visualize the flexbox and see what it's doing.

Soviut
  • 88,194
  • 49
  • 192
  • 260
  • Thx! They still don't look like they are fully in the center tho, but I can experiment with the `flex-grow`. – Mart May 03 '23 at 06:43
  • You won't be able to properly center them because the logo is offsetting the navbar. Any attempts to hack around that will probably result in the navbar crashing into, or overlapping the logo. – Soviut May 03 '23 at 16:12
  • Yeah, i probably need to have them in the same class. – Mart May 05 '23 at 06:10