CSS Navigation Menu

Question

How can I have logo, menu items, and social media icons on the same line within the navigation? I like to have logo to the left, menu items in the middle, and social media icons to the right on the same line if that makes sense.

HTML:

<div class="nav">
    <div id="nav-wrapper">
      <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="service.html">Service</a></li>
          <li><a href="contact.html">Contact</a></li>
      </ul>
      <ul class="social">
          <li class="facebook"><a href="https://www.facebook.com/jason.murray.3975012"</a>Facebook</li>
          <li class="twitter"><a href="https://twitter.com/jmurray504"</a>Twitter</li>
          <li class="linkedin"></li><a href="http://http://www.linkedin.com/pub/jason-murray/42/249/440/"</a>Linkedin</li>
      </ul>
    </div>
</div>   


CSS

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

.facebook li {
        background: url(Image/facebook.png);
        height: 20px;
        width: 18px;
}

.twitter li {
        background: url(Image/twitter.png);
        height: 20px;
        width: 18px;
}

.linkedin li {
        background: url(Image/linkedin.png);
        height: 20px;
        width: 18px;
}

Your html is valid except an extra </li> in your last li, but your CSS is no good.. should be maybe .twitter a (not li).. etc.. — webkit
– webkit, Commented Jun 22, 2014 at 14:31

Gofilord · Accepted Answer · 2014-06-22 15:07:35Z

1

There you go. I fixed everything, made it pretty and just like you described it. new CSS:

nav {
    text-align: center;
    background-color: #008cff;
    font-family: arial;
}
.nav-wrapper a {
    color: white;
    text-decoration: none;
    padding: 15px;
}
nav a:hover {
     background: #47ACFF;
}
.nav-wrapper {
     padding: 0 20px 0 20px;
}
nav ul, nav ul li {
     display: inline-block;
}
.logo {
    float: left;
}
.social {
    float: right;
}

Only problem is it doesn't fit small screens (phones, tablets etc.), so I would recommend using Bootstrap.

edited Jun 22, 2014 at 15:07

answered Jun 22, 2014 at 14:53

Gofilord

6,6414 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Murray Over a year ago

Well played sir! Well played. Now I would like to add social media icons in the menu instead of the words (facebook, twitter etc.) By adding the images, will this have an negative impact by moving other elements within this menu?

Gofilord Over a year ago

I suggest using Font Awesome. It's free, easy to use and the icons are just like text so they fit perfectly.

Hive7 · Accepted Answer · 2014-06-22 14:34:08Z

0

Add this to your css:

.nav li, .nav a {
    display: block;
    float: left;
}

answered Jun 22, 2014 at 14:34

Hive7

3,6952 gold badges24 silver badges39 bronze badges

Comments

Leon · Accepted Answer · 2014-06-22 14:36:08Z

0

The best way to get elements to show in line, is to add "display:inline", or in this case I'd go for "display:inline-block"

A simple solution for this example would be:

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

See http://jsfiddle.net/dj2da/

(Also fixed your html by removing the first closing </li> tag in the Linkedin link)

edited Jun 22, 2014 at 14:36

answered Jun 22, 2014 at 14:30

Leon

2,1591 gold badge27 silver badges40 bronze badges

Comments

Jason Murray · Accepted Answer · 2014-06-23 00:03:15Z

0

HTML5 Boilerplate and Bootstrap? I understand that these two are common in terms of developing a responsive website. What do you guys think on using these two products? I guess I'm more old school still working through Dreamweaver CS3. I haven't created websites since 2009 and I know things have changed since then with technology (Mobile & Tablets). With that being said, I just need a few pointers on how to incorporate it into my website as well as using programs to alleviate cross browser compatibility. I've heard modernizr is a good tool to use.

answered Jun 23, 2014 at 0:03

Jason Murray

1191 silver badge9 bronze badges

Collectives™ on Stack Overflow

CSS Navigation Menu

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related