3659

Nav bar align: Logo on left, links on right

Question:

I'm having trouble getting the alignments right on a nav bar. I'm trying to figure out how to get the logo part to stay on the left of the nav bar, but put the links on the right side. I've tried using float: right but I can't seem to get it to work on just the links. How can I do this?

<a href="https://jsfiddle.net/t46bcayd/1/" rel="nofollow">https://jsfiddle.net/t46bcayd/1/</a>

<nav> <ul> <li><a href="http://google.com/" class="logo">Logo</a></li> <li><a href="http://google.com/">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </nav>

Answer1:

Flexbox is perfect here...no need to change the structure, unless you want to.

<pre class="snippet-code-css lang-css prettyprint-override">body { margin: 0; padding: 0; font-size: 15px; } nav { background-color: black; margin: 0; overflow: hidden; } nav ul { margin: 0; padding: 0; display: flex; } nav ul li { display: inline-block; list-style-type: none; } nav ul li a { color: white; background-color: red; display: block; line-height: 3em; padding: 1em 3em; text-decoration: none; } nav ul li:first-child { margin-right: auto; } nav ul li a.logo { background-color: green; } nav ul li a:hover { background-color: blue; } <pre class="snippet-code-html lang-html prettyprint-override"><nav> <ul> <li><a href="http://google.com/" class="logo">Logo</a> </li> <li><a href="http://google.com/">One</a> </li> <li><a href="#">Two</a> </li> <li><a href="#">Three</a> </li> </ul> </nav>

Answer2:

If you remove the inline-block rule for the list items you can float the first one left and the others right:

li { float: right; } li:first-child { float: left; }

<strong><a href="https://jsfiddle.net/j08691/t46bcayd/2/" rel="nofollow">jsFiddle example</a></strong>

You'd also need to re-order the list items that are floated right to:

<li><a href="http://google.com/" class="logo">Logo</a></li> <li><a href="#">Three</a></li> <li><a href="#">Two</a></li> <li><a href="http://google.com/">One</a></li>

Answer3:

You could use flexbox for this.

<style> nav{ display:flex; justify-content: space-between; align-items: center; } </style> <nav> <a href="http://google.com/" class="logo">Logo</a> <ul> <li><a href="http://google.com/">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </nav>

<strong>Remember prefixes</strong> ... works in IE > 9

Answer4:

Use the float:left property

<pre class="snippet-code-css lang-css prettyprint-override">body { margin: 0; padding: 0; font-size: 15px; } nav { background-color: black; margin: 0; overflow: hidden; } nav ul { margin: 0; padding: 0; } nav ul li:not(:first-child) { float: right; } nav ul li { display: inline-block; list-style-type: none; } nav ul li a { color: white; background-color: red; display: block; line-height: 3em; padding: 1em 3em; text-decoration: none; } nav ul li a.logo { background-color: green; } nav ul li a:hover { background-color: blue; } <pre class="snippet-code-html lang-html prettyprint-override"><nav> <ul> <li><a href="http://google.com/" class="logo">Logo</a></li> <li><a href="http://google.com/">Three</a></li> <li><a href="#">Two</a></li> <li><a href="#">One</a></li> </ul> </nav>

I did have to change the order so they showed up right

Recommend

  • split space of a fixed size container equally. a case for flexbox?
  • side bar with a no previsible width in CSS/HTML
  • Why are Google search results in UIWebView not triggering webViewDidFinishLoad?
  • Remove 2 vertical borders from HTML table - how?
  • Bootstrap 4 - Center List
  • D3 Tree layout visualization - Inherit child with multiple parents
  • Displaying iOS iAds only to supported countries
  • Why does Redshift need to do a full table scan to find the max value of the DIST/SORT key?
  • How to make loader center on the View
  • ng-repeat not working with table but works with list
  • Function JavaScript : on Menu CSS HTML
  • Can't delete li from to-do list
  • Python adding lots of things to PATH. How do I stop?
  • Cut the background to expose the layer below
  • Possible to “watch” both HAML and SASS at the same time?
  • Angularjs pass function from Controller to Directive (or call controller function from directive) -
  • Simulate click Geckofx vb,net
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Jquery UI tool tip close icon
  • Seeking advice on Jetty HttpClient Hang
  • Using jQuery closest() method with class selector
  • HTML download movie download link
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Alternatives to the OPTIONAL fallback SPARQL pattern?
  • Jquery - Jquery Wysiwyg return html as a string
  • Google cloud sdk not working when python points python3
  • Calling of Constructors in a Java
  • Traverse Array and Display in markup
  • bootstrap to use multiple ng-app
  • Transpose CSV data with awk (pivot transformation)
  • How to get icons for entities from eclipse?
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • using HTMLImports.whenReady not working in chrome
  • Java static initializers and reflection
  • Turn off referential integrity in Derby? is it possible?
  • unknown Exception android
  • JaxB to read class hierarchy
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app
  • Android Heatmap on canvas or ImageView