Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #749992

    Hi, I just changed my mobile header to transparent, but after I did this any text I had in color sections below jumped up and moved under the header, so the logo and menu overlap and sit on top? Please see screenshot.
    Mobile header problem image

    I tried code from other posts to add padding to the logo I also tried adding margin and padding to bottom of the mobile header like this

    @media only screen and (max-width: 768px) {
    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
      background: transparent!important;
      position: absolute!important;
    padding-bottom:  50px important;
     margin-bottom:  50px important;

    but nothing worked.

    In the end I had to hack it by creating a custom class and adding massive padding-top to the special headings,

    .mobileheaderfix .av-special-heading-tag{
    padding-top: 75px !important;

    but this is not ideal and more work as I have to add it to all headings on all pages.
    Is there just one class or bit of code I can simply just add to the mobile header instead?
    Many thanks


    Hey David,

    Sorry for the late reply,

    Can you please provide a link to the site so that we may take a closer look?
    Best regards,
    Jordan Shannon


    sorry yes the site is
    thank you



    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width:767px) {
    	main {

    Best regards,


    Thanks that has sorted it, I just had to make the amount a lager number, cheers



    I am glad you were able to get this sorted. If you need any additional help please let us know.

    Best regards,
    Jordan Shannon

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

You must be logged in to reply to this topic.