CODEWITHSUNDEEP
htmlcssnavbar
Jamiemcg
Jamiemcg

Reputation: 69

CSS Navbar - Positioning UL within a DIV

I've been trying to create a pretty basic CSS navbar, comprised of a "navbar" container div, and within that a "logo" div and a "menu" div.

However, I seem to have run into some trouble with getting the "menu" div (which contains an unordered list of links) to nest within the "navbar" container div.

Perhaps I'm missing something very simple, but I've tried doing some Googling and can't seem to find a solution to this issue.

I did see a tutorial that showed how to create a similar type of navbar using only an unordered list, but given that I'm also looking to have a logo and potentially other elements in the navbar, I don't think that's what I'm looking for.

Please see below for the HTML and CSS that I've been working with. Any assistance would be greatly appreciated.

Thanks!

body{
	padding: 0px;
	margin: 0px;
}

.navbar{
	height: 50px;
	width: 100%;
	background: #b4cef7;
}

.logo{
	padding-top: 7px;
	padding-left: 10px;
	width: 50px;
	padding-right: 0px;
	margin-right: 0px;
}

.navbar ul{
	list-style-type: none;
}

.navbar ul li{
	float: left;
	height: 100%;
	width: 50px;
	margin: 10px;
	background-color: white;
	border: 1px solid black;
}

.navbar ul li a{
	text-decoration: none;
	color: black;
}
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Simple CSS Navbar</title>

	<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
	<link rel="stylesheet" href="styles.css">

 </head>
 <body>
  
	<div class="navbar">

		<div class="logo">
			<i class="fas fa-coffee fa-2x"></i>
		</div>

		<div class="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>

	</div>

 </body>
</html>

Upvotes: 0

Views: 761

Answers (1)

Jacob G
Jacob G

Reputation: 14172

You have a set height on the navbar and a block level element, forcing the navbar to a new line.

There's many ways you could have the elements on the same line, such as floating or displaying inline-block.

Here's a simple demo of using inline-block:

body {
  padding: 0px;
  margin: 0px;
}

.navbar {
  height: 50px;
  width: 100%;
  background: #b4cef7;
}

.navbar>* {
  display: inline-block;
  vertical-align: top;
}

.logo {
  padding-top: 7px;
  padding-left: 10px;
  width: 50px;
  padding-right: 0px;
  margin-right: 0px;
}

.navbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.navbar ul li {
  float: left;
  height: 100%;
  width: 50px;
  margin: 10px;
  background-color: white;
  border: 1px solid black;
}

.navbar ul li a {
  text-decoration: none;
  color: black;
}
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />

<div class="navbar">

  <div class="logo">
    <i class="fas fa-coffee fa-2x"></i>
  </div>

  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

</div>

There isn't generally a option you should use, be it inline-block, floating, or flexbox; it really just depends on your preferences and target browsers.

Upvotes: 2

Related Questions