Aligning Navbar Links to the Right

Question

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 :)

Answer 1 · 2015-07-14T03:32:19Z

July 14, 2015 3:32am

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.

Welcome to the Treehouse Community

Looking to learn something new?

Stu Cowley

Stu Cowley

Aligning Navbar Links to the Right

1 Answer

rydavim

rydavim