[eberle]

How do I remove the space at the top of the site that displays the logo? Even when I don’t include a logo image, there is still a white space across the site.

http://www.worldfare.co

Thanks!

[Pratik]

Hi @eberle,

Try following code in Appearance=> Theme Options=> Additional CSS box:

#site-branding, #masthead {
    padding: 0;
}

If this is not what you are looking for, please post in with a screenshot.

Regards,
Pratik

[eberle]

Thanks for the help. That CSS was on the right track. It made the white space smaller, but it’s still there. Here’s a screen shot:

[eberle]

As an alternative, if there’s a way to not display that section at all (the logo section), then we can use the header image section. The header image section fills the whole window, and that’s what we want.

Thanks!

[Pratik]

Hi @eberle,
It looks like you added header image.

Try following code:

#masthead {
    display: none;
}

This will remove the top whitespace.

Regard,
Pratik

[Steffen]

If you do this:

#masthead {
    display: none;
}

…then the primary navigation menu will not be there on mobile devices, because the mobile primary navigation is inside of #masthead.

I did it like this (to remove it from start-page, on all pages do it without .home):

.home #site-branding{display: none;}
.home #masthead {
background-color: #404040;
height: 0px;
padding: -1px;
margin: -100px;
}

Then i had to reposition the mobile navigation:

.home #header-left-menu{
background-color: #d0d0d0;
/*position: relative;*/
/*right: -5vw;*/
padding: 4px;
margin: 10px;
}

For some mobile devices i had to do the same within:
@media screen and (-webkit-min-device-pixel-ratio:0) {...}

[Pratik]

Hi @Steffen,

You can do following:

@media screen and (min-width: 990px) {
    #masthead {
        display: none;
    }
}

This will hide the masthead only on screens where no mobile men is shown.

Let me know if this helps.

Regards,
Pratik

[Author]

Posts