How do I add an image to the left side of Navigation Menu Bar?

user_18640220 0
Viewed 87

How Do I get an image in line with the Navigation bar on the left side and the menu items listed on the right side? I keep getting my image to go on top of the navigation bar instead of being inline/on the navigation bar.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>TLC Music Group</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
</head>
<body>
    <nav>    
    <ul class="navigationbar">
        <li><img src="imgs/tlclogo.png" id=logo alt="TLC Logo" /> </li>
        <li><a href="index.html">Home</a></li>
        <li><a href="music.html">Music</a></li>
        <li><a href="news.html">News</a></li>
    </ul>        
    </nav>
</body>
</html>

  .navigationbar ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    text-align: center;
    float: left;
    vertical-align:top;
    top: 0;
    width: 100%;
    overflow: hidden;
    background-color: #333
  }

  #logo {
    float: left;
}

  li {
    float: right;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* Change the link color to #111 (black) on hover */
  li a:hover {
    background-color: #111;
  }
css html
1 Answers

Try using display:flex; this will make your life a lot easier. Also put img tag outside un-ordered list for HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>TLC Music Group</title>
    <link rel="stylesheet" href="css/style.css" />
    <meta name="description" content="Our first page" />
    <meta name="keywords" content="html tutorial template" />
  </head>
  <body>
    <nav>
        <img src="imgs/tlclogo.png" id=logo alt="TLC Logo" />
      <ul class="navigationbar">
    
        <li><a href="index.html">Home</a></li>
        <li><a href="music.html">Music</a></li>
        <li><a href="news.html">News</a></li>
      </ul>
    </nav>
  </body>
</html>

and for CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
ul li {
  position: relative;
  margin: 0 20px;
  list-style: none;
  display: inline-block;
  cursor: pointer;
}

I hope this will resolve your issue.

user_170152570
Related