Centered CSS Drop down navigation – subnavigation opens left

[Purrfectfire]

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.

[Paulie_D]

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

[Purrfectfire]

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

[paulooze]

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.

[Purrfectfire]

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?

[Paulie_D]

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

[Paulie_D]

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

That should get you started.

[Purrfectfire]

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

[Author]

Posts