Styling navigation through CSS

Question

I'm having troubles coming up with a solution to styling my navigation. This is what I want:

What I'd like

And this is a link to what I have so far.

This is supposed to be two separate classes of links on one navigation bar. One set on the left for the logo and other default links, and on the right is for social. I'm just going to need help with the left side for now but I thought I'd explain even further.

On the left side, each link should be centered in their own little block with a border on the left and right being 1px white. On their hover state, the background of their "box" should be white. The logo should be first on the left.

I'm sorry that I'm not able to explain better, but I've done my best. The picture and the link to what I have so far should explain the most.

I think it would be better if the logo was in the CSS instead of the HTML??

CSS:

/* Navigation bar */
#navi {
   font-family: Helvetica Neue: Condensed Bold;
   font-size: 14px;
   color: white;
   text-transform: uppercase;
   background-color: #1e416f;
   height: 30px;
   margin: 0 0 20px 0;
   padding: 20px 0 0 0;
}

#navi a {
color: white;
margin: 0 0 0 20px;
height: 30px;
}

#navi a:hover {
background: white;
color: #1e416f;
}

HTML:

<!-- NAVIGATION -->
<div id="navi">
<img src="/imgs/navi/caul_white_nav.png">
<a href="#">Directories</a>
<a href="#">Committees</a>
<a href="#">Resources</a>
<a href="#">About</a>
</div>

All images, unless they are in the actual content, should be added with CSS using the background or background-image properties. — ninty9notout
– ninty9notout, Commented Aug 27, 2013 at 13:19
I would recommend using a ul/li scheme, like, <ul> <li><a>link1</a></li> </ul> then you can just make li elements inline, float left, and they will all line up. then adjust bg images, etc. — kangoroo
– kangoroo, Commented Aug 27, 2013 at 13:20
@ninty9notout Yes, I thought so too with my comment "I think it would be better if the logo was in the CSS instead of the HTML??". I guess I didn't explain that I needed help with that as well. — Michaela LeBlanc
– Michaela LeBlanc, Commented Aug 27, 2013 at 13:21

Niels · Accepted Answer · 2013-08-27 13:21:11Z

2

You can try something like:

#navi img, #navi a {
    float: left; /* float next to each other on the left hand side */
}
#navi a { /* use some padding to have some empty space */
    padding: 5px;
    border-right: 1px solid #ffffff;
}
#navi a:hover { /* on hover, background white on A tags */
    background: #ffffff;
}

And than play untill it fits, with the right side you could do the same, inside the nav you can float it to the right. If you want to have a seperate DIV you should also float this #navi to the left and the #social to the right.

If you only use padding on an element (which is blocked) the text will always be centered because the padding left / right are the same.

TIP: If you use floats like this and you want an item to be on a new line. Normally it would be set next to the float. If you use a DIV after the item and do a clear: both; it will be on a new line.

answered Aug 27, 2013 at 13:21

Niels

50.1k4 gold badges68 silver badges86 bronze badges

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

4 Comments

Michaela LeBlanc Over a year ago

Thanks so much. Most help here. What about having the image in the CSS itself as a background-img?

Niels Over a year ago

You can add the background to the #navi and add a padding-left to it, so you have enough space to show the logo. Normally on most websites the logo is a link to the home page. Many people are used to this, so it's up to you how to handle this.

Michaela LeBlanc Over a year ago

I suppose I'll use it as an image instead to I can link to the homepage. I was suggested that I use ul/li for these links but without it it works your way... Is ul/li necessary for links like these?

Niels Over a year ago

If you use UL > LI > A you need to float the LI and optinally the A. This because the LI is a block element.

ninty9notout · Accepted Answer · 2013-08-27 13:52:59Z

I've written this using your design: http://jsfiddle.net/ninty9notout/v3658/

Just information on what is what here:

On the homepage, use: <h1 class="logo">...</h1> and on all other pages: <div class="logo">...</div>

.logo and #primary-nav are floated left to make them stick to the left side.

All the li and a tags are also floated to the left. Block elements are easier to style than inline elements.

#tools-nav is floated to the right so it sticks to the right side.

I've used text-indent: -9999px; to hide the text for the logo and the would-be icons in the #tools-nav - feel free to add the icons via background property. Set the widths for the icon anchors to whatever width your icons are + 20 (+10px on either side).

And that is that.

The HTML:

<div id="navi">
    <h1 class="logo"><a href="#">Name of Site</a></h1>

    <ul id="primary-nav">
        <li><a href="#">Directories</a></li>
        <li><a href="#">Committees</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">About</a></li>
    </ul>

    <ul id="tools-nav">
        <li class="login"><a href="#">Log In</a></li>
        <li class="email icon"><a href="#">Email</a></li>
        <li class="twitter icon"><a href="#">Twitter</a></li>
        <li class="search icon"><a href="#">Search</a></li>
    </ul>
</div>

The CSS:

#navi {
    height: 30px;
    background: #1e416f;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
}

.logo {
    margin: 0;
    padding: 0;
    float: left;
}

.logo a {
    float: left;
    margin: 2px 10px;
    width: 36px;
    height: 26px;
    background: url(http://redsky.incredifull.com/imgs/navi/caul_white_nav.png) left top no-repeat;
    text-indent: -9999px;
}

#primary-nav, #tools-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary-nav li, #primary-nav a,
#tools-nav li, #tools-nav a { float: left; }

#primary-nav a,
#tools-nav a {
    color: white;
    text-decoration: none;
    padding: 0 10px;
    border-right: 1px solid white;
    line-height: 30px;
}

#primary-nav li:first-child a,
#tools-nav li:first-child a{ border-left: 1px solid white; }

#tools-nav { float: right; }

#tools-nav .icon a {
    text-indent: -9999px;
}

#tools-nav .email a { /* image */ }
#tools-nav .twitter a { /* image */ }
#tools-nav .search a { /* image */ }

I think it's what you wanted. Enjoy :)

Bindiya Patoliya · Accepted Answer · 2013-08-27 13:21:13Z

0

Use

 <img src="/imgs/navi/caul_white_nav.png" style="float: left;">

answered Aug 27, 2013 at 13:21

Bindiya Patoliya

2,7821 gold badge18 silver badges16 bronze badges

Collectives™ on Stack Overflow

Styling navigation through CSS

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related