Grow your CSS skills. Land your dream job.

How to do this navigation properly ?

  • # March 7, 2013 at 4:50 pm

    This is the [navigation](http://i.imgur.com/bOTbwYg.jpg “navigation”) .

    This is how I’ve done it. [Codepen](http://codepen.io/markomarkogame/pen/HzcBv “Codepen”).

    I just dont think thats the way to do it, if not that i just don’t like the way i did it. For example if you remove **position:relative**(I dont even know what it means here ..) from **#header h1** logo disappears and goes behind the nav .. Also if you remove margin-top:-100px from **.navigacija** you will see “behind the scenes”.

    So can you gives give me a solution to do it better or if you can do it in codepen or something.

    # March 7, 2013 at 5:36 pm

    The menu looks fine. I had to do a fork and clean up your code to make sense of it though. I am not terribly good with the in’s and out’s of why CSS does what it does, but the menu seems fine.

    # March 7, 2013 at 5:46 pm

    I wish you were right but for example if I click on logo in Firefox i get to see this outline[ PIC](http://i.imgur.com/BHpchGi.jpg “PIC”) (orange dotted )and to me that suggest something isn’t right. (this is caused by text indent probably ) but still ..

    There has to be a better way.

    # March 7, 2013 at 6:13 pm

    Well, the proper and correct way to do it would be more like this: http://codepen.io/JoshBlackwood/pen/koKHG

    Credit goes to @andyunleash for the general method.

    # March 7, 2013 at 8:10 pm

    Cool method also cute cat, but it’s weird seeing my blog title in a

  • cause i would have used “logo” as my blog title so I don’t think it’s the same as h1 for SEO.

# March 7, 2013 at 8:24 pm

Here’s someone’s pen I forked awhile back. It has a centered logo and a single list for the nav

http://codepen.io/wolfcry911/pen/HyLdg

# March 7, 2013 at 8:55 pm

>cause i would have used “logo” as my blog title so I don’t think it’s the same as h1 for SEO.

It’s really not good practice, IMO and many [others](http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/), to use an h1 for your logo anymore. Nor does it make sense from an SEO perspective, [even according to SEOmoz.](http://www.seomoz.org/q/h1-tag)

# March 7, 2013 at 9:38 pm

@joshblackwood this is not compatable with IE though? How would you fix it? Navigation shows up as a vertical menu instead. I have the same issue and I can’t fix it.

# March 8, 2013 at 9:34 am

I always forget about IE7. Mostly because I hate it, and believe in killing it with fire. But here’s how to fix it in IE6/7:

.main-nav li {
display:inline-block;
text-align: center;
width: 12%;
vertical-align: middle;
/* For IE 6/7 */
zoom:1;
*display:inline;
}

Updated CodePen: http://codepen.io/JoshBlackwood/pen/koKHG

As you can see, it’s just adding two lines—since display: inline-block; doesn’t work in IE7 or below, we set display: block; with a browser hack that’ll only target IE7 and below. Then zoom: 1; triggers hasLayout and lets the element behave as if it’s inline-block (oversimplified, I could never fully wrap my head around IE and hasLayout).

# March 8, 2013 at 9:48 am

@JoshBlackwood: do you really need zoom: 1; there? IE should trigger hasLayout through the explicit width value :) I don’t have easy means to test IE6 & 7 right now so I can’t confirm.

# March 8, 2013 at 2:09 pm

@Merri, zoom: 1; is needed to even make the width register in IE7, actually. This is because we’re telling IE7 to render the element as inline, and inline elements can’t have set width’s unless they’re positioned (which takes them out of the flow, and thus they become block-level). Triggering hasLayout does this because it makes the element responsible for rendering itself and its children. This combined with a set width, allows something much like display: block;.

# March 8, 2013 at 4:57 pm

Thanks guys for the navs but can you tell me what was a main mistake I made in my nav ? Or what should I avoid or change in the future

# March 9, 2013 at 7:30 am

So did i ? (look at the above)

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".