Premium Theme Support › Organic Themes › Restaurant

Header

  • Author
    Posts
  • #155892
    jbmmc2020
    Member

    I have my header fixed on my desktop layout and love it, but am trying to update the header for mobile to no avail. Im writing within the

    @media     screen and (max-width 480) class, but I think I’m calling the header’s class incorrectly (#header). What class should I use to make changes to the header on mobile?

    Thank you!

    The blog I need help with is: (visible only to logged in users)

    #155903
    emilysuesrq
    Theme Author

    Hello, try: #header.header-margin

    #155937
    jbmmc2020
    Member
    Original poster

    Thanks Emily- Not having any luck with that. The header still remains fixed on the mobile page and has a margin at the top. Here’s my mobile code, any thoughts?


    @media     screen and (max-width: 480px) {
    #header.header-margin {
    position: relative;
    height: 50%;
    padding: 0;
    }

    #156004
    itsdavidmorgan
    Theme Author

    Hello,

    First, change your media query to 767px to target phones. Then, try adding “!important” tags to your styles like so:

    @media screen and (max-width: 767px) {
    #header.header-margin {
        position: relative !important;
        height: 50% !important;
        padding: 0;
    }
}

    I hope this helps. Thanks!

  • The topic ‘Header’ is closed to new replies.