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
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
