CODEWITHSUNDEEP
htmlcss
Tharindu Dhanushka
Tharindu Dhanushka

Reputation: 337

Build the custom navigation

I want to build navigation menu bar like this

enter image description here

I follow the tutorial and I try to build it but I can not build it.

HTML markup:

<header>
<div class="nav">
  <ul>
    <li class="home"><a href="#"><img src="home.jpg"  height="40px"></a></li>
    <li class="tutorials"><a href="#">OPPORTUNITIES FOR SAVING</a></li>
    <li class="about"><a href="#">CASE STUDIES</a></li>
    <li class="news"><a href="#">TESTMONALS</a></li>
    <li class="contact"><a href="#">BLOG</a></li>
  </ul>
</div>

CSS:

.nav ul {
list-style: none;
background-color: #197b30;
text-align: center;
padding: 0;
margin: 0;
}
 .nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1em;
  line-height: 40px;
 height: 40px;
 border-bottom: 1px solid #888;
}


.nav a {
  text-decoration: none;
 color: #fff;
 display: block;
transition: .3s background-color;
}


 .nav a:hover {
  background-color: #005f5f;
  }

    .nav a.active {
  padding:0 0 0 0;
   }

   @media screen and (min-width: 600px) {
      .nav li {
    padding:0 15px 0 0;
   border-bottom: none;
    height: 40px;
   line-height: 40px;
   font-size: 1em;
   }
    /* Option 1 - Display Inline */
   .nav li {
   display: inline-block;
    margin-right: -4px;
   }

Result is like this

enter image description here

How to fix this? I am new to css and html please help me?

Upvotes: 0

Views: 25

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

You just need to add vertical alignment

   .nav li {
   display: inline-block;
   vertical-align: middle;
    margin-right: -4px;
   }

JSfiddle Demo

.nav ul {
  list-style: none;
  background-color: #197b30;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
.nav a:hover {
  background-color: #005f5f;
}
.nav a.active {
  padding: 0 0 0 0;
}
@media screen and (min-width: 600px) {
  .nav li {
    padding: 0 15px 0 0;
    border-bottom: none;
    height: 40px;
    line-height: 40px;
    font-size: 1em;
  }
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    vertical-align: middle;
    margin-right: -4px;
  }
<div class="nav">
  <ul>
    <li class="home">
      <a href="#">
        <img src="http://lorempixel.com/image_output/abstract-q-c-40-40-10.jpg" height="40px">
      </a>
    </li>
    <li class="tutorials"><a href="#">OPPORTUNITIES FOR SAVING</a>
    </li>
    <li class="about"><a href="#">CASE STUDIES</a>
    </li>
    <li class="news"><a href="#">TESTMONALS</a>
    </li>
    <li class="contact"><a href="#">BLOG</a>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions