Grow your CSS skills. Land your dream job.

Centered CSS Drop down navigation – subnavigation opens left

  • # February 26, 2013 at 3:28 pm

    Hi there,

    i am a beginner and i am trying to get the centered navigation drop down menu to work.
    It took me nearly a week to get the thing centered and a toggle button implemented to open en close the content div.

    Now somehow the sub-navigation opens not under the main navigation anymore but somewhere left.
    Also I don’t get the main navigation center lined with the only graphic button in the Navigation bar.

    Here are the files and a mockup graphic, so is more clear what I am trying to accomplish:
    https://www.dropbox.com/sh/xyr43nmjipjt0cd/lfeEj0X734

    Could anybody please let me know where I ‘broke’ the navigation and how i might get the text centered with the graphic.

    Thanks in advanced.

    # February 26, 2013 at 5:21 pm

    I think it might be more helpful if you were to make a Codepen example for us.

    My initial guess however is that you haven’t set a position property correctly somewhere in the navigation.

    You haven’t provided your CSS either.

    EDIT…found it in the scripts folder!?

    # February 26, 2013 at 6:08 pm

    Hi Paulie_D,

    thank you for getting back to me.

    I never used codepen en was intimidated by it, since the pictures are not showing if I place it in codepen..
    I thought providing the entire structure (scripts and all in folders) would be as good.

    I hope this was right:
    [CodePen Project](http://codepen.io/anon/full/loezs “Codepen Project”)

    # February 26, 2013 at 6:23 pm

    Hey, I just checked your CodePen and this should fix your problem:
    Add _position: relative;_ to _.navigation ul li_. Then it will position your dropdown menu from its parent li, not from the whole page.
    I did not want to provide you complete code, just to guide you to fix it by yourself with little help (you will learn it better then). But make sure to ask again, if you will not understand.

    # February 27, 2013 at 3:21 am

    Hi. Thanks for your responds. I appreciate the teaching effect. Unfortunately it didn’t fix the sub-navigation.

    .navigation ul li {
    display: inline;
    position: relative;
    vertical-align: middle;
    text-align: center;}

    [Updated ? CodePen](http://cdpn.io/loezs “”)

    Would you try again to help me?

    # February 27, 2013 at 4:35 am

    If you want the images to show they have to be on a webserver and linked in. I use Photobucket.

    Otherwise, just use placeholder images of the same size from either Loempixel.com or Placehold.it

    In the meantime…perhaps you could adapt this: http://codepen.io/Paulie-D/pen/86731daa8998d3df818160b9df55d6d9

    # February 27, 2013 at 6:09 am

    Oh heck….I had some time this morning: http://codepen.io/Paulie-D/pen/qhyGn

    That should get you started.

    # February 28, 2013 at 9:45 am

    Wow.. thanks so much.. i will get right to it :P

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