CODEWITHSUNDEEP
htmlcss
Jason Murray
Jason Murray

Reputation: 119

CSS Navigation Menu

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;
}

Upvotes: 0

Views: 912

Answers (4)

Jason Murray
Jason Murray

Reputation: 119

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.

Upvotes: 0

Gofilord
Gofilord

Reputation: 6641

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.

Upvotes: 1

Leon
Leon

Reputation: 2149

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)

Upvotes: 0

Hive7
Hive7

Reputation: 3675

Add this to your css:

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

Upvotes: 0

Related Questions