Combining fixed position and margin %

[copaesthetic]

I’m trying to set a [fixed navigation menu](http://i.imgur.com/iqcNj75.png “fixed navigation menu”) on a liquid layout, whereby the list items have a margin-left: 25% The problem I’m encountering is the links (list items) become un-clickable.

However if I do any of the following, the links begin to work again:

1. remove “position: fixed” from “nav ul” (can’t, needs to be fixed)

2. specify “px” instead of “%” for margin-left under “nav ul li a” (can’t, needs to be liquid in width)

3. remove “position: relative” from next container div in the HTML (can’t, it uses z-index)

• HOME
• STORY
• SERVICES
• SALONS

nav {
}
nav ul {
width: 100%;
position: fixed;
}
nav ul li {
height: 18px;
margin: 4px 0;
}
nav ul li a {
font-size: 1.8em;
font-weight: bold;
margin-left: 25%;
}

[Paulie_D]

We need to see a live link or a Codepen with HTML & CSS

[Merri]

Give a bigger z-index to nav ul.

[Paulie_D]

Probably something to do with this…

>3. remove “position: relative” from next container div in the HTML (can’t, it uses z-index)

A live link would be ideal….

[copaesthetic]

Alright, here is a live link http://tinyurl.com/clsgbrk

Thanks

[wolfcry911]

The container (960px wide) is covering the nav. Your content is only 520px wide, so why not make the container the same? Then lose the large left padding on the children.

That will get you close, but at smaller screen sizes the nav links are still covered. I’d work towards centering the nav and shifting the links to the left.

[copaesthetic]

Thanks @wolfcry911

I didn’t even realize that, I was so focused on the content it didn’t occur to me the width of the container can still essentially cover the nav and render it unusable. Yeah, I plan on making it responsive and center the nav at smaller sizes :)

[Author]

Posts