- This topic is empty.
April 13, 2013 at 10:48 am #44095
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!
LouisApril 13, 2013 at 11:40 am #131718
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.April 13, 2013 at 1:20 pm #131728
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.”_April 13, 2013 at 1:35 pm #131730
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 occursApril 13, 2013 at 2:47 pm #131731
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.April 14, 2013 at 9:51 am #131778
> 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 relativeApril 15, 2013 at 1:45 pm #131866
Awesome! Thanks for your answers!
- The forum ‘CSS’ is closed to new topics and replies.