How do I add a logo into the nav bar in CSS?


Tags: css,navbar,nav

Problem :

Okay after a lot of googling I finally found out how to centre the menu links in the middle of the nav bar. After that I came across another problem...adding a logo in the navigation bar. My problem is, the logo doesn't come into the navigation bar, it instead goes above the bar. I would like to have the logo floating to the left in the nav bar. I have tried a few things, including adding display: inline-block/inline to all the main elements, but no difference. Though I tried adding display: inline to the nav ul, but the background of the nav bar disappears (see second image) and I can't add a background via adding height and width.

P.s Excuse me If there are few amateur mistakes, I have only started to code a few months ago.

Thanks for your time!

How the nav bar looks now:

enter image description here

How the nav bar looks with display: inline;

enter image description here

Here is my HTML and CSS:

#logo {
  height: 50px;
  width: auto;
  float: left;
}
nav ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #1a1a1a;
  text-align: center;
  border: 1px solid #e7e7e7;
  display: inline-block;
  width: 100%;
}
nav li {
  display: inline-block;
}
nav a {
  display: inline-block;
  padding: 16px 15px;
  text-decoration: none;
  font-family: arial;
  font-weight: bold;
  color: white;
}
nav a:hover {
  background-color: orange;
  color: white;
}
<nav>
  <img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"></img>
  <ul>
    <li><a href="">Game 1</a>
    </li>
    <li><a href="">Game 2</a>
    </li>
    <li><a href="">Game 3</a>
    </li>
  </ul>
</nav>



Solution :

Just insert it inside your ul.

#logo {
  height: 50px;
  width: auto;
  float: left;
}
nav ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #1a1a1a;
  text-align: center;
  border: 1px solid #e7e7e7;
  display: inline-block;
  width: 100%;
}
nav li {
  display: inline-block;
}
nav a {
  display: inline-block;
  padding: 16px 15px;
  text-decoration: none;
  font-family: arial;
  font-weight: bold;
  color: white;
}
nav a:hover {
  background-color: orange;
  color: white;
}
<nav>
  <ul>
    <img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
    <li><a href="">Game 1</a>
    </li>
    <li><a href="">Game 2</a>
    </li>
    <li><a href="">Game 3</a>
    </li>
  </ul>
</nav>


    CSS Howto..

    How do I add CSS font styles to PHP echos?

    $(document).on(“click”… how to collapse a list when clicking anywhere else on the document

    How to use Grunt while continually compressing css / javascript

    How to override CSS in joomla template

    How to ask browsers to refresh (flush) the cache of my website?

    How to retrieve the background image url defined in CSS?

    CSS: How to make a responsive grid without a framework

    How can I implement “CSS versioning” (to solve cache issues) using JSF 2 h:outputStylesheet?

    How to fit these divs inside a div to occupy whole horizontal width

    How to show a region on a image with CSS

    How to get dynamic css layout like that:

    How to set the horizontal menu to be center without setting the specific width

    How to set original image for animate background image in css

    How to make rounded corner cut-out using CSS?

    How to add custom CSS class name in PHP?

    how to get this modal window to work correctly?

    CSS HTML : stumped on how to center this piece of text

    How to change the width of css tab according to length of alphabet?

    How to modify divs in grid template site?

    How to print outlines and background colors from css, when using JQuery printElement, and IE8?

    how to setup css value for “-webkit-transform” in the “animate” method? [duplicate]

    How do I trigger an onclick CSS on a particular ID

    How to use Auto compiler for less and sass in visual studio

    How to remove the bottom border of a box with CSS

    How to set a background image in rails from css?

    How to see the style of the thumb of range input in Chrome developer tools?

    How to set div width to the width of the table in it?

    Show DIV on hover of other DIV that is not parent with CSS or JS [duplicate]

    how to change the CSS linear-gradien backgroundt height (thickness)?

    CSS: how to place controls at both extrems of a cell table