Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aligning Navbar Links to the Right

Hey guys,

I'm building my portfolio site and I am stuck on something that is no doubt super simple that I just can't seem to get right.

I want to be able to align the links on my navigation to the right but I am not completely sure on how I can do it, I have been staring at my stylesheet for a couple of days now and I can't seem to put my finger on it. I have tried floating the .main-nav to the right, I have tried text-align: right also.

I have included a Codepen so you can have a look at what my navigation looks like along with the styles that I am using. I will also add the code below this post too, excluding the normalize.css as there is way too much code.

style.css

/* Page Styles
-------------------------------- */

* {
   box-sizing: border-box;
}

html {
   padding-top: 70px;
}

body {
   font: 400 0.959em/1.5 'Helvetica Neue', sans-serif;
   color: #8c989e;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

a {
   transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, width 0.3s ease, opacity 0.3s ease;
}

.container {
   width: 78%;
   margin: auto;
}

.main-header {
   box-shadow: 0 4px 0 rgba(50,59,69,.08);
}

/* Header Styles */

.main-header {
   background-color: #fff;
   padding: 10px 0;
   display: table;
   width: 100%;
   position: fixed;
   top: 0;
}

.main-logo,
.main-nav,
.main-nav li {
   display: inline-block;
}

.main-logo,
.main-nav {
   display: table-cell;
   vertical-align: middle;
   padding-top: 5px;
   padding-bottom: 5px;
}

.main-logo,
.main-nav li {
   border-radius: 5px;
}

.main-nav li {
   margin-right: 40px;
}

.main-nav {
   padding-left: 50px;
}

.main-logo a {
   font: 500 1.5em;
   letter-spacing: -1px;
   color: #90ceb7;
}

.main-logo a:hover {
   color: #79ac99;
}

.main-nav a {
   font: 500 1.010em, sans-serif;
   color: #8c989e;
}

.main-nav a:hover {
   color: #6e777c;
}

.main-logo a,
.main-nav a {
   text-decoration: none;
   display: block;
   text-align: center;
}

/* Media Queries
-------------------------------- */

@media(max-width: 768px) {
   .main-logo,
   .main-nav,
   .main-nav li {
      display: block;
      width: initial;
      height: initial;
      margin: initial;
   }

   .main-nav {
      padding-left: initial;
   }

   .main-nav li {
      margin-top: 15px;
   }
}

index.html

<header class="main-header">
         <div class="container">
            <h1 class="main-logo"><a href="index.html">Stu Cowley.</a></h1>
            <ul class="main-nav">
               <li><a href="portfolio.html">Portfolio</a></li>
               <li><a href="about-me.html">About me</a></li>
               <li><a href="contact-me.html">Contact me</a></li>
            </ul>
         </div>
      </header>

The design of the navigation was inspired by Guil Hernandez on the CSS Layout Techniques.

Thanking you in advance,

Stu :)

1 Answer

rydavim
rydavim
18,814 Points

Probably not the most elegant solution, but the following additions worked for me.

.main-logo {
  float: left;
}

.main-nav {
  float: right;
  margin-top: 2.0rem; // This is just to get it to line up nicely with the main logo.
}

Edit - Looking through the rest of the CSS, you've got a lot of different methods of doing layout.

Displaying things as tables and inline and using floats all at the same time might not be wise. Elements could end up interacting in ways you don't necessarily expect.

I would suggest simplifying where possible so you don't have so many different behaviors to keep track of.

Of course, please disregard if you're experimenting while trying to solve your right-side navigation dilemma.