Fixed Menu on a responsive design

[strozzap]

Hi this is my first post on here! (And surely not the last)

I’m creating a website (http://frenchegg.com) on a responsive design.

I’d like the main menu to be fixed… or at least to always show even when I scroll down the page.

I switched from an absolute position to a fixed one and it works fine on a computer, since I lowered the main content (padding-top:xxem).

However, on a Mobile Phone, the main content is still hidden under the main menu…

I could add more on padding-top… but then it will look ridiculous on a computer.

Do you guys have any solution?

Thanks a lot! And please let me know if I said or did anything that is not allowed on this forum… I’m new here but I’d like to keep a good reputation!

Louis

[jurotek]

Hi. Remove the top padding on your main-content. Add margin-top about 1em or so. Then include your main-content class in your media query where at break point your header-wrap is about 193 px height. Add appropriate top margin to your main-content so it clears your header-wrap.

[strozzap]

Thanks for your answer!

However, I’m not quite sure how to complete this task _”include your main-content class in your media query where at break point your header-wrap is about 193 px height.”_

[jurotek]

find your media queries in your css file and put .main-content in there and apply top margin to it enough to clear the header. That media query would have something like min or max width below 768 px or so cause that’s when the problem occurs

[strozzap]

It creates another problem. The menu on the mobile phone is now also fixed… Hmm and I added the top margin top to my media queries and it doesn’t seem to fix the problem.

Basically all I need is a fixed menu on a computer and a relative menu on a mobile phone.

[jurotek]

> The menu on the mobile phone is now also fixed… Hmm

you have to add .header-wrap to your mobile media query and give it position relative

[strozzap]

Awesome! Thanks for your answers!

[Author]

Posts