CODEWITHSUNDEEP
htmlcss
Jmuse.v2
Jmuse.v2

Reputation: 37

Put Logo In Css Nav Bar

I want to know how to put a logo in my css navbar because I don't know how to put a logo in my css navbar. I have no clue on how to put the logo in the css navbar so it would be very nice if one of yall can help me out.

body {
  margin: 0px;
}

ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0px auto;
  background: #222;
  padding: 0px;
}

li {
  float: right;
  font-size: 20px;
}

li a {
  text-decoration: none;
  color: white;
  padding: 20px 20px;
  display: block;
  text-align: center;
}

ul li a:hover {
  border-bottom: 3px solid grey;
  padding-bottom: 17px;
}

img {
  height: 70px;
}
<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325">
<ul>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Home</a></li>
</ul>

Upvotes: 1

Views: 121

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

The first thing you need to do is to create a columnar structure and have the background on the parent. And then add the logo to the left and links to the right. The best way to do is to use the <header> and <nav> tags as they are really semantic.

Here's something you might find useful:

body {
  margin: 0px;
}

/* Add these */
header {
  overflow: hidden;
  background: #666;
}

header h1 {
  float: left;
  padding: 0 20px;
}

header nav {
  float: right;
  padding: 20px 0 0;
}
/* End Add these */

ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0px auto;
  padding: 0px;
}

li {
  float: left;  /* Changed here. */
  font-size: 20px;
}

li a {
  text-decoration: none;
  color: white;
  padding: 20px 20px;
  display: block;
  text-align: center;
}

ul li a:hover {
  border-bottom: 3px solid grey;
  padding-bottom: 17px;
}

img {
  height: 70px;
}
<header>
  <h1>
    <img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325" />
  </h1>
  <nav>
    <ul>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Home</a></li>
    </ul>
  </nav>
</header>

Also, I just changed the background colour from #222 to #666 to keep it websafe and also make the logo visible. Feel free to change it.

Preview

preview

Upvotes: 2

Dylan Anlezark
Dylan Anlezark

Reputation: 1267

Here is a fiddle that I hope will help you get you on the right track;

https://jsfiddle.net/Lyrw49mj/7/

HTML

<ul>
 <li class="NavHeader"><a><img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325"></a></li> 
 <li><a href="#">Contact</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Home</a></li>
</ul>

CSS

 body {
  margin: 0px;
 }

ul {
 list-style-type: none;
 overflow: hidden;
 margin: 0px auto;
 background: #222;
 padding: 0px;
}

li {
 float: right;
 font-size: 20px;
}

li a {
 text-decoration: none;
 color: white;
 padding: 20px 20px;
 display: block;
 text-align: center;
}

ul li a:hover {
 border-bottom: 3px solid grey;
 padding-bottom: 17px;
}

.NavHeader a img{
 position: relative;
 top: 0px;
 left: 0px;
 height: 70px;
 width: auto;
}

.NavHeader a:hover{
 border-bottom: none;
 padding-bottom: 20px;
}

Upvotes: 0

Related Questions