Place menu items inside the div

Question

Place menu items inside the div

Asked 3 years, 8 months ago

Viewed 102 times

2

I have the following code:

.top-content {
  background-color: #fff;
  border: 1px solid #e07b39;
  height: 69px;
}
.nav-list {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  
}

<div class="top-content">
  <h1>LOGO</h1>
  <nav>
    <ul class="nav-list">
      <li class="nav-items"><a href="#">Mission</a></li>
      <li class="nav-items"><a href="#">Featured Content</a></li>
      <li class="nav-items"><a href="#">Location</a></li>
    </ul>
  </nav>
</div>

My items are out of the box div. I’ve tried to get one padding-bottom, but they don’t get in the box.

Someone has a better suggestion?

height:auto? Off as?

– MagicHat

2020/10/30 at 11:53
@Magichat see how it looks like in https://jsfiddle.net/fretagi/xu85ptjr/51/ and you will see that the menu items are out of the box div. I can’t have height: auto because the project requires it to be 69px

– user221459

2020/10/30 at 12:44

1 answer

Browser other questions tagged html css html5 css3 flexbox

You are not signed in. Login or sign up in order to post.

by Cmte Cardeal • **5,299** points · Answer 1 · 2020-10-30T13:02:15+00:00

This happens because of your h1 is with standard behaviour of the type block. The way your code is, to display the nav within your div next to the h1, you could add a display: flex: in your class .top-content.

Would look like this:

.top-content {
        background-color: #fff;
        border: 1px solid #e07b39;
        height: 69px;
        display: flex;
        align-items: center;
      }

.nav-list {
        display: flex;
        justify-content: flex-end;
        list-style: none;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="top-content">
      <div class="div-title">
        <h1>LOGO</h1>
      </div>
      <div class="div-nav">
        <nav>
          <ul class="nav-list">
            <li class="nav-items"><a href="#">Mission</a></li>
            <li class="nav-items"><a href="#">Featured Content</a></li>
            <li class="nav-items"><a href="#">Location</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </body>
</html>

That would be the expected result?

It was my suggestion of a possible solution.

Observer that I put a align-items: center; just to get them vertically aligned.