Header space gap

How can i remove the white gap below my header? It is on all my pages that i want to remove it. See picture

Hi,

Thank you for contacting us.

Seems likely it is a site specific issue. I need direct inspection to find out the solution. Can you share a link to your page here?

Regards,
Kharis
aThemes Support

Yes, here it is
http://mettefriis.dk.linux371.unoeuro-server.com/

Hi,

Thank you for sharing the link.

As checked, the issue doesn’t seem to appear on my screen.

Have you been able to resolve it by yourself?

Regards,
Kharis
aThemes Support

I think i resolved it by removing some padding. Can you help me with another thing? I would really like to center the logo and nav menu. But i can’t seem to do it.

Can you help?

Hi,

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

    @media only screen and (min-width: 1200px) {
      .site-header .col-md-4,
      .site-header .col-md-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;    
      }
      .site-header .site-branding {
        text-align: center;
      }
    }

Regards,
Kharis
aThemes Support

That’s very nice, is there any way i can get the logo to be on the right side of the nav menu? And make the logo a bit bigger?

Does that mean you want the mobile button to be moved to far left? It would be better if you can share a raw mockup showing the final result. So I can get the exact code to suggest.

Regards,
Kharis
aThemes Support

Hi Kharis. Thanks for looking into it.
URL: http://mettefriis.dk.linux371.unoeuro-server.com/

This is the site now

This is how i would like the header to look

Thanks once again

He,

I visited your website and the space doesn’t appear on my screen. The header area looks fine. Can you let me know the resolution of your device? Perhaps it only appears on a specific screen size.

Regards,
Kharis
aThemes Support

Hi Kharisblank. I have fixed the gap. However i would like the icon to be larger and centeret with the navigation menu.
A problem i also have is that on smaller screens the header navigations appears under each other, which doesn’t look very good.

Is there a way i can make the logo bigger and center it along the navigation text, and prevent the navigation menu from appearing under each other on smaller screens?

Hi,

Try adding this CSS code to your website’s Additional CSS.

    @media only screen and (min-width: 1200px) {
      .site-header .custom-logo-link img {
        max-width: 170px;
      }
      .site-branding.col-md-4 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;  
      }
      .main-navigation.col-md-8 {
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;    
      }
      .main-navigation ul.menu > li {
        padding-left: 15px;
        padding-right: 15px;
      }
    }

Regards,
Kharis
aThemes Support

This worked nice, now the menu text isn’t under each other anymore. However suddenly my header disappears when I’m at the top of my page, and only appears if i scroll down.

How can i fix that?

I am sorry I didn’t get it. It looks normal on my screen.

Can you take a screen recording to point me the issue on your end?

Regards,
Kharis
aThemes Support

Hi Kharis, thanks again for looking into it.

Here’s a link to a screen recording

Hi,

Try adding this CSS code to your website’s Additional CSS.

    .site-header {
      z-index: 9999;
    }

Let me know how it goes.

Regards,
Kharis
aThemes Support

I have just added the code, however the issue still persists. What else can i do?

Hi,

Thank you for trying. I need more information.

Can you let me know which browser you’re using? Is it the latest version?

Does the issue also appear on other web browsers?

Regards,
Kharis
aThemes Support

It happens both in Firefox, Chrome and Edge. And they are alle the latest versions

Hi,

Thank you for getting back.

I am on Mac. Your header looks fine on my Chrome, Firefox, and Safari.

Perhps it might be OS specific issue.

I will ask my colleague who are on Windows to investigate further. And let’s see his views.

Regards,
Kharis
aThemes Support