Covering mobile header menu

  • Resolved lizzyslenning

    (@lizzyslenning)


    6 years, 2 months ago

    I have figured out the CSS for the desktop version (fixed and added a margin at the top) but now the mobile header is being completely covered.

    This is the code I have in the custom website css
    header {
    margin-top: 48px;
    }
    #masthead {
    margin-top: 48px;
    }

    and this is what I have in the simple banner custom CSS
    position: fixed;

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author rpetersen29

    (@rpetersen29)

    6 years, 2 months ago

    Hi @lizzyslenning looks like you may need to just adjust the margin on the mobile header. Luckily there looks like there’s a special class for that:

    
header.shadow_thin {
    margin-top: 76px;
}

    Let me know if that works.

    Thread Starter lizzyslenning

    (@lizzyslenning)

    6 years, 2 months ago

    This did not work.

    Plugin Author rpetersen29

    (@rpetersen29)

    6 years, 2 months ago

    Can you please describe how its not working? Because it looks good on my end.

    Thread Starter lizzyslenning

    (@lizzyslenning)

    6 years, 2 months ago

    When scrolling on mobile, there is a space at the top now and it is overlapping the header. It is also overlapping the top area header when the page first loads before scrolling. I pasted you code in addition to the code I already had in the section. Was that correct??

    Thread Starter lizzyslenning

    (@lizzyslenning)

    6 years, 2 months ago

    It looks okay on a tablet screen, but not the mobile size. Not sure if this is due to how long the message is?

    Plugin Author rpetersen29

    (@rpetersen29)

    6 years, 2 months ago

    Ah i see what you mean. Sorry, i was on tablet size. You’ll want to also add:

    
@media (max-width: 599px) {
  header.shadow_thin {
    margin-top: 132px;
  }
}

    For other form factors that may not look right you’ll just want to duplicate the above css and change the max-width value.

    Thread Starter lizzyslenning

    (@lizzyslenning)

    6 years, 2 months ago

    is there a way to just disable the banner on mobile? It just seems to be having issues with the spacing and header on other pages as well as the home page.

    Plugin Author rpetersen29

    (@rpetersen29)

    6 years, 2 months ago

    You can disable it by adding:

    @media (max-width: 599px) {
  .simple-banner {
    display: none;
  }
}

    You’ll have to also adjust the margin for your header to get rid of the margin in this situation.

    @media (max-width: 599px) {
  header.shadow_thin {
    margin-top: 0;
  }
}
    Thread Starter lizzyslenning

    (@lizzyslenning)

    6 years, 2 months ago

    It worked for removing the banner, but not the space above the header on mobile.

    Plugin Author rpetersen29

    (@rpetersen29)

    6 years, 2 months ago

    It looks good on my end, what browser are you testing on?

    Plugin Author rpetersen29

    (@rpetersen29)

    6 years, 2 months ago

    You may need to add !important to the header value,

    @media (max-width: 599px) {
  header.shadow_thin {
    margin-top: 0 !important;
  }
}
    Thread Starter lizzyslenning

    (@lizzyslenning)

    6 years, 2 months ago

    I deleted cache and it has worked!! Thank you for your help, I appreciate it.

    Plugin Author rpetersen29

    (@rpetersen29)

    6 years, 2 months ago

    Great! Glad it worked out.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Covering mobile header menu’ is closed to new replies.