White space between menu and header

Hi,

I’ve got problem with this strange white space between menu and header on my website (www.mhr.pl) on mobile devices.

Screenshot in attachment.


Hello there,

Thank you for getting in touch.

In order to fix the issue, could you please try to add the following CSS code through the Simple Custom CSS plugin?

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

  .site-header{
    margin-top: 0; 
  }
  
}

I hope it helps.

Regards,
Kharis

It works, thank you very much! Last question - is there possibility to change height of black stripe (the one with logo, and with menu button on mobiles)?

Hello there,

Its height currently follows the height of your site logo. I thought you should need to scale down the logo on mobile screen.

The header container has 20px top and bottom padding by default. I thought you should reduce it. Might be 3px enough?

Try to add the following CSS code.

@media only screen and (max-width: 991px){
  
  #masthead{
    padding: 3px;
  }
  
  .site-logo{
    max-width: 100px;
  }
  
  .btn-menu{
    font-size: 36px;
    width: auto;
  }
  
} 

You would make your own adjustment if needed.

Warmest regards,
Kharis

Works great! Thank you once again for quick and extremely professional response!

Regards,
JS

Dear JS,

You’re welcome!

I’m happy to have an opportunity to assist you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Have a nice day/night!

Warmest regards,
Kharis

Hi Kharis,

I tried the code you posted above, but I still have a big white space between my hamburger menu & the first line of text on the page. This only happens in mobile view.
Please see the link here:

Can you show me how to remove those extra white space?
Thanks.

Hello @handyplus,

Try enabling the Front Page template in the Page Attributes box in the page editing panel. If it doesn’t work for you, add the below CSS code to Appearance > Customize > Additional CSS.


@media only screen and (max-width:1024px) {
  
  .page-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
}

Regards,
Kharis

Hi Kharis,

Thanks! My problem is resolved.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis,

I’m getting the same white space above the menu only on iPad Pro 12.9 in portrait. When in landscape, the white bar goes away. On iPad Pro 9.7 there is a white space in landscape but not in portrait. Here is the website www.centerpointeli.com. Thank you in advance.

~Edgar

Hi Edgar,

Try adding this CSS code to Appearance > Customize > Additional CSS from your site dashboard.


.header-contact {
  position: relative;
  z-index: 2;
}

.sydney-hero-area {
  margin-top: -23px;
  position: relative;
  z-index: 1;  
}

Regards,
Kharis

Hi Kharis,

For me, the problem is the same. I have a big blank space between menu and header image, as follow you can see.

www.townlovers.com

Could you please support?

Thank you very much :slight_smile:
BR
Sara

Hello Sara,

The header area on your homepage looks fine to me.

Cloudup

Am I missing something? Please advise.

Regards,
Kharis

Hi Kharis,

First of all, thank you so much for all your attention.
I don´t understand why, but my image is different:

http://tinypic.com/r/a316h2/9

Best regards,
Sara

Hello Sara,

What’s your screen resolution? You can get it by visiting this site https://www.whatismyscreenresolution.com/

Have you tried it on larger ones?

Regards,
Kharis

Hi,

Thanks again.
Itg seems that my screen resolution is 1024 x 600. It happens in bigger desktops and mobile phones…

Thank you,
BR,
Sara

Hello Sara,

I am sorry for the long delay.

The default design of the Sydney’s header will transform like so when the screen is smaller than 1025px. Since your logo image is light, the header area will look an empty white space as the header bar background color is light too. The solution is to make it darker. It can be achieved by adding this CSS code to Appearance > Customize > Additional CSS from dashboard.


@media only screen and (max-width:1024px) {
  
  .site-header {
    background-color: #000 !important;
  }
  
}

Change the color code to meet your need.

Regards,
Kharis

Hi There,

I used both solutions (thru simple custom CSS and “additional CSS”) but there is still a big gap between the menu and top of the webpage. I am using Sydney finance.
my second question is i’d like to make the logo bigger, is it possible to do that?

Thanks in advance.

Hello @mehdin,

Do you have a link to your site to share here?

Regards,
Kharis