html - Why is my Flexbox navbar with a left-aligned logo and right-aligned menu not working as expected? - Stack Overflow

admin管理员组

文章数量:1389768

I am trying to design a navbar where the "SushiMan" heading is aligned to the left and the other list items (Menu, Food, Services, etc.) are aligned to the right. The layout works fine when I follow a tutorial on YouTube, but it’s not working as expected on my local machine.

Here is my HTML and CSS code:

.header__nav {
  display: flex;
  justify-content: space-between;
  /* This will push the items to the edges */
  align-items: center;
  /* Vertically aligns items */
  padding: 0 20px;
  /* Adds space on the sides */
  overflow: hidden;
}

.header__logo {
  flex: 1;
  display: flex;
  position: relative;
  padding: 20px;
}

.header__logo-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
}

<header>
  <nav class="header__nav">
    <div class="header__logo">
      <h4>SushiMan</h4>
      <div class="header__logo-overlay"> </div>
      <ul class="header__menu">
        <li>
          <a href="#menu">Menu</a>
        </li>
        <li>
          <a href="#menu">Food</a>
        </li>
        <li>
          <a href="#menu">Services</a>
        </li>
        <li>
          <a href="#menu">About Us</a>
        </li>
        <li>

        </li>
        <img src="./assets/search.svg" alt="search"/>
      </ul>
      <ul class="header__menu-mobile">
        <li>
          <img src="./assets/menu.svg"/>
        </li>

      </ul>

    </div>

  </nav>
</header>

I am trying to design a navbar where the "SushiMan" heading is aligned to the left and the other list items (Menu, Food, Services, etc.) are aligned to the right. The layout works fine when I follow a tutorial on YouTube, but it’s not working as expected on my local machine.

Here is my HTML and CSS code:

.header__nav {
  display: flex;
  justify-content: space-between;
  /* This will push the items to the edges */
  align-items: center;
  /* Vertically aligns items */
  padding: 0 20px;
  /* Adds space on the sides */
  overflow: hidden;
}

.header__logo {
  flex: 1;
  display: flex;
  position: relative;
  padding: 20px;
}

.header__logo-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
}

<header>
  <nav class="header__nav">
    <div class="header__logo">
      <h4>SushiMan</h4>
      <div class="header__logo-overlay"> </div>
      <ul class="header__menu">
        <li>
          <a href="#menu">Menu</a>
        </li>
        <li>
          <a href="#menu">Food</a>
        </li>
        <li>
          <a href="#menu">Services</a>
        </li>
        <li>
          <a href="#menu">About Us</a>
        </li>
        <li>

        </li>
        <img src="./assets/search.svg" alt="search"/>
      </ul>
      <ul class="header__menu-mobile">
        <li>
          <img src="./assets/menu.svg"/>
        </li>

      </ul>

    </div>

  </nav>
</header>

• html
• css
• flexbox

Share Improve this question Follow asked Mar 15 at 10:22 riddhiriddhi 111 silver badge

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You need to close <div class="header__logo"> before the <ul class="header__menu">. Your code should be as follows:

<header>
  <nav class="header__nav">
      <div class="header__logo">
          <h4>SushiMan</h4>
          <div class="header__logo-overlay"> </div>
      </div>
      <ul class="header__menu">
        <li>
          <a href="#menu">Menu</a>
        </li>
        <li>
          <a href="#menu">Food</a>
        </li>
        <li>
          <a href="#menu">Services</a>
        </li>
        <li>
          <a href="#menu">About Us</a>
        </li>
        <li>

        </li>
        <img src="M.png" alt="search"/>
      </ul>
      <ul class="header__menu-mobile">
        <li>
          <img src="M.png"/>
        </li>
      </ul>
  </nav>
</header>

Also, your css could be written better. But for the problem you raised, this is the solution I wrote.

Your html structure is wrong. Do not put header__menu and header__menu-mobile inside the logo div. Attached my codepen screenshot after the fix.

<header>
  <nav class="header__nav">
    <div class="header__logo">
      ....
    </div>

    <ul class="header__menu">
      ....
    </ul>

    <ul class="header__menu-mobile">
     ....
    </ul>
  </nav>
</header>

Remove flex: 1; from header logo and apply below styles.

.header__menu {
  display: flex;
  margin: 0;
  padding: 0;
}

.header__menu li {
  margin-left: 20px;
}

本文标签：