Grow your CSS skills. Land your dream job.

Combining fixed position and margin %

  • # March 1, 2013 at 2:13 pm

    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)

    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

    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 http://tinyurl.com/clsgbrk

    Thanks

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

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