The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Combining fixed position and margin %

  • # March 1, 2013 at 2:13 pm

    I’m trying to set a [fixed navigation menu]( “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)

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

    # March 1, 2013 at 3:03 pm

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

    # March 3, 2013 at 3:34 am

    Give a bigger z-index to nav ul.

    # March 3, 2013 at 9:10 am

    This reply has been reported for inappropriate content.

    In short you have something flowing over the ul. Either find out what it is or give the ul a higher z-index.

    # March 3, 2013 at 9:24 am

    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….

    # March 11, 2013 at 1:49 pm

    Alright, here is a live link


    # March 11, 2013 at 2:35 pm

    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.

    # March 11, 2013 at 8:23 pm

    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 :)

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed