Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centered CSS Drop down navigation – subnavigation opens left

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #43000
    Purrfectfire
    Participant

    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.

    #126206
    Paulie_D
    Member

    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!?

    #126216
    Purrfectfire
    Participant

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

    #126237
    paulooze
    Member

    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.

    #126268
    Purrfectfire
    Participant

    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?

    #126273
    Paulie_D
    Member

    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

    #126282
    Paulie_D
    Member

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

    That should get you started.

    #126437
    Purrfectfire
    Participant

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.