CODEWITHSUNDEEP
htmlcss
Chris Dormani
Chris Dormani

Reputation: 510

Issue coding a logo in the navigation bar on a HTML project

I am new to HTML and CSS and attempting to build a home page.

I have coded in a logo to the Navigation bar, but in doing so the a href for the HOME page has been skewed.

Please see screenshot.!

Is this because I haven't coded the logo in a div or programmed a clearfix?

Could I get help how to fix this please so the aesthetics look proper.

enter image description here

My HTML

<div class="nav-container">
    <nav class="container">
      <ul>
        <a href="#" class="pull-left"><img src="images/kphr.png" alt="KPHR">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About KPHR Solutions</a></li>
        <li><a href="clients.html">Clients</a></li>
        <li><a href="candidates.html">Candidates</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
      </ul>
      <div class="clear"></div>
    </nav>
  </div>

my CSS

a.btn {
  margin: 0 1em;
}



/* Box Model Hack */
* {
     -moz-box-sizing: border-box; /* Firexfox */
     -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
     box-sizing: border-box; /* IE */
}

.clear {
    clear: both;
}



    .nav-container {
        background: rgba(0,0,0,0.8);
    }

    .navbar-inner { background:  }

    nav ul { padding-left: 0; }

    nav ul li { float: left; list-style: none; font-size: 20px; }

    nav ul li a { color: white; margin: 18px; padding: 18px; display: block; }

    nav ul li a:hover { color: #ff3300; transition: color 0.7s ease-in; }

Upvotes: 2

Views: 2275

Answers (1)

ADreNaLiNe-DJ
ADreNaLiNe-DJ

Reputation: 4919

Your image is not in a li tag and the a tag is not closed. Here is the working code:

<div class="nav-container">
    <nav class="container">
      <ul>
        <li><a href="#" class="pull-left"><img src="images/kphr.png" alt="KPHR"></a></li>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About KPHR Solutions</a></li>
        <li><a href="clients.html">Clients</a></li>
        <li><a href="candidates.html">Candidates</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
      </ul>
      <div class="clear"></div>
    </nav>
  </div>

To avoid to increase navbar size, because of padding and margin on the li containing the logo, you should add this css:

nav ul li a.pull-left { margin: 0; padding: 0; display: block; }

Adjust the margins and the paddings to have the result you want.

Upvotes: 4

Related Questions