FIx Gap on mobile menu area?

What can I do to fix this huge gap caused by the schedule appt button on mobile browser?
I am using the plain menu which looks good on desktop and tablet but does this on all pages of mobile 

Comments

  • Hey Scott,

    i think you can solve this problem by editing your CSS.
    Copy&paste this code to Design > BeTheme Options > Custom CSS & JS > CSS:

    body:not(.template-slider):not(.header-simple) #Header {
        min-height: 190px;
        background-position: center 202px;
    }

    @muffin: correct me, if i'm wrong ;-)
  • @itniederrhein You were very close but it was a right direction. Instead of above css, we recommend to use below in this case:
    @media only screen and (max-width: 479px) { 
        body:not(.template-slider):not(.header-simple) #Header { min-height: 0 !important; }
    }
  • Thanks guys but I think i would like to eliminate the search and the button label all together on mobile as it just pushes everything to far down.

    I tried this but still have a bunch of white spacing on mobile between menu and content


    @media only screen and (max-width: 479px) { 
      .button_label{display: none!important; }
    }

    @media only screen and (max-width: 479px) { 
    #search_button{display: none!important; }
    }


    see here, having hard time with menu, title and breadcrumbs looking right on mobile
  • To remove additional white space on mobile you need to use below css as well:
    @media only screen and (max-width: 479px) { 
        #Top_bar .top_bar_right { display: none !important; }
    }
    This css will remove whole right bar section. But unfortunately there is nothing what you can with breadcrumbs on mobile. You can only remove them from mobile devices what is the best choice.
  • ok thankyou for your help
Sign In or Register to comment.