Grow your CSS skills. Land your dream job.

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.

    # April 13, 2013 at 1:20 pm

    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

    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

    # April 13, 2013 at 2:47 pm

    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

    > 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

    # April 15, 2013 at 1:45 pm

    Awesome! Thanks for your answers!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".