Fixed Menu on a responsive design
# April 13, 2013 at 10:48 am
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# April 13, 2013 at 11:40 am
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.
You must be logged in to reply to this topic.