I can't get my navigation bar to display inline. Any advice/help would be much appreciated.

Question

Hello,

I can't seem to get my navigation to display inline. The navigation links are stacked on top of each other instead of side by side. Below is both my html and css. Any help would be much appreciated. Thanks!

HTML: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Best Of Boise</title> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div>

  </div>
  <header class="main-header">
    <div class="container clearfix">
      <h1 class="name"><a href="#">Best of Boise</a></h1>
      <ul class="main-nav">
        <li><a href="#"</a>Food</li>
        <li><a href="#"</a>Outdoor Life</li>
        <li><a href="#"</a>Living</li>
        <li><a href="#"</a>This week in Boise</li>
      </ul>
    </div>
  </header> <!-- .main-header -->

  <div class="banner">
      <div class="container clearfix">
      <h1 class="headline">The Best City</h1>
      <span class="tagline"><a href="#">Best City For Raising A Family</a></span>
    </div>
  </div> <!-- .banner -->

CSS:

/* ================================= Base Element Styles ==================================== */

{ box-sizing: border-box; }

body { font-family: 'Varela Round', sans-serif; line-height: 1.6; color: #3a3a3a; }

p { font-size: .95em; margin-bottom: 1.8em; }

a { text-decoration: none; }

h2, a { color: #093a58; }

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

/* ================================= Base Layout Styles ==================================== */

/* ---- Navigation ---- */

.name a, .main-nav a { display: block; text-align: center; padding: 2px 0; }

.main-nav a { font-size: .95em; color: #3acec2; text-transform: uppercase; }

.main-nav a:hover { color: #093a58; }

/* ================================= Base Layout Styles ==================================== */

/* ---- Banner ---- */

.banner, .main-footer { text-align: center; }

.banner { color: #fff; background: #3acec2; padding: 3.2em 0; margin-bottom: 60px; }

.container { width: 80%; margin: 0 auto; }

.main-footer { background: #d9e4ea; padding: 2em 0; margin-top: 30px; }

/* ================================= Media Queries ==================================== */

@media (min-width: 769px) {

.main-header { position: fixed; background-color: white; box-shadow: 0 1px 4px rgba(0,0,0,.4); width: 100%; top: 0; z-index: 1000; }

.banner { padding-top: 300px; height: 500px; }

.container { width: 90%; margin: 0 auto; }

.name, .col { float: left; padding-left: 15px; padding-right: 15px; }

.main-nav { float: right; }

.main-nav li { display: inline-block; margin-left: 40px; }

.primary, .tertiary { width: 30%; }

.secondary { width: 40%; }

.clearfix::after { content: " "; display: table; clear: both; }

}

Answer 1 · 2018-07-01T22:18:36Z

July 1, 2018 10:18pm

Hi Cody,

Your are floating the unordered list with the class of main-nav to the left which is all good but to get the list items inside of it displayed on one line you have to do the same thing:

main-nav li {
 display: inline-block;
 margin-left: 40px; 
 float: left; /* will push the first item all the way to the left */
}

To prevent the ul from collapsing you have to add the clearfix to it.

Hope this is helpful

Welcome to the Treehouse Community

Looking to learn something new?

Cody Perryman

Cody Perryman

I can't get my navigation bar to display inline. Any advice/help would be much appreciated.

1 Answer

Hakim Rachidi

Hakim Rachidi