Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed Menu on a responsive design

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #44095
    strozzap
    Member

    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

    #131718
    jurotek
    Participant

    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.

    #131728
    strozzap
    Member

    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.”_

    #131730
    jurotek
    Participant

    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

    #131731
    strozzap
    Member

    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.

    #131778
    jurotek
    Participant

    > 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

    #131866
    strozzap
    Member

    Awesome! Thanks for your answers!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.