Issue postioning Nav menu

[Runt]

Hi,

I’m helping a friend with his website and need help with a nav menu.

We need to try and get the nav menu to appear in the same position all the time instead of moving when the browser window is resized. There is also an issue on the Galaxy tab where the last menu item appears on the next line and pushes the slider image out of position.

If some one could take a look I would really appreciate it.

I’ve created a code pen here (I hope I did it correctly).

http://cdpn.io/dkhvg

http://codepen.io/anon/pen/dkhvg

Thanks,

runt

[Runt]

The website link is: http://www.fitzpatrickscasinogroup.com
And it’s the nav menu to the right of the header.

Thanks

[Paulie_D]

I assume you are talking about the location menu?

If so, where is it supposed to appear?

[Runt]

It’s appearing fine there, but when the browser window is resized the menu moves across the screen, and it also displays too far out to the right on some browsers.

I only know fairly basic CSS so I assume I did something wrong when I was positioning the menu.

Any help appreciated

[CarlRosell]

you could use a media query and change the css when the menu overlaps.

@media all and (max-width:700px){
//your new css when the website is smaller than 700px.
//you don’t have to recreate all your css here. just the css that you want to change.
}

[Paulie_D]

I would look into a different method positioning the menu in the first place rather than absolute positioning*.

Perhaps putting it to the header (or whatever the top element is) and floating it right.

*as you have found, it’s not really suited to responding to browser resizing.

[Runt]

I’ve solved it. Thanks for your time.

[Runt]

Cheers Paulie, hadn’t seen your answer but that’s exactly what it was.
Used margin-left and position: relative instead and that solved it.

[Author]

Posts