CODEWITHSUNDEEP
htmlcss
ICC TV
ICC TV

Reputation: 11

Issue with topbar CSS

I am trying to get my code to have two navigation on top of each other This is the code below that I have and my CSS. How do I do a division line after every link on the second nav? This is what I am trying to archive.

Is there a way to add icons to the navigation?

what should be 

navbar {
  display: flex;
  justify-content: space-between;
  background-color: black;
  color: white;
  height: 40px;
}

li {
  display: inline-block;
  padding: 14px 16px;
}

nav {
  display: flex;
  justify-content: space-between;
  background-color: #444444;
  color: white;
  text-align: center;
  height: 90px;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 5px;
}

li {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  padding: 14px 16px;
}
<navbar>
  <ul class="title-area">
    <!-- float this left -->
    <li>Sunt</li>
    <li>Beatae Vita</li>
  </ul>
  <p>Doleremquee laudantium otam Doloremque laudantium otam</p>
  <ul class="nav-items">
    <!-- float this right-->
    <li>Arhieto</li>
    <li>Aperam</li>
    <li>Totam</li>
    <li>Rem</li>
  </ul>
</navbar>

<nav>
  <ul class="title-area">
    <!-- float this left -->
    <li>Sunt</li>
    <li>Beatae Vita</li>
  </ul>
  Doleremquee laudantium otam Doloremque laudantium otam

  <ul class="nav-items">
    <!-- float this right-->
    <li>Arhieto</li>
    <li>Aperam</li>
    <li>Totam</li>
    <li>Rem</li>
  </ul>
</nav>

This is my code https://jsfiddle.net/4zpmskro/

Upvotes: 1

Views: 53

Answers (1)

crazymatt
crazymatt

Reputation: 3286

So in order to make this work with the code you are using I tried to keep your use of ul consistent. 

<nav>
  <ul class="title-area">
    <!-- float this left -->
    <li>Sunt</li>
    <li>Beatae Vita</li>
  </ul>

  <ul>
    <li>Doleremquee laudantium otam Doloremque laudantium otam</li>
  </ul>

  <ul class="nav-items">
    <!-- float this right-->
    <li>Arhieto</li>
    <li>Aperam</li>
    <li>Totam</li>
    <li>Rem</li>
  </ul>
</nav>

Then in your CSS I added this

nav ul {
  border-right: 1px solid red;
  padding: 0;
  margin: 0;
}

nav ul:last-child {
  border-right: 0;
}

This will add a right border to your ul elements and then remove the last one. I only applied this to the bottom nav but the same set up could be applied to the top navigation bar as well. Border is red but you can change it to any color. Here is an updated version of your js.fiddle Hope that helps.

Upvotes: 2

Related Questions