White Space Above Header

I’m trying to remove the white space above the header images on my single pages so that the logo and menu are on top of the image. I’ve tried multiple codes from the forum and I can’t seem to get it to work. Here is my code.

.admin-bar .site-header, .admin-bar .site-header.float-header {
    top: 0;
}
.admin-bar .site-header, .admin-bar .site-header.float-header {
    top: 32px;
}
.site-header {
    background-color: transparent !important;
}
@media only screen and (max-width: 991px)
.site-header {
    background-color: ;
}
.site-header {
    position: relative;
    background-color: rgba(0,0,0,0.9);
}
@media only screen and (max-width: 1024px)
.site-header {
    position: static;
    background-color: rgba(0,0,0,0.9);
}
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    padding: 20px 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
article, aside, footer, header, hgroup, main, nav, section {
    display: block;
}
Inherited from body.page.page-id-5502.page-template.page-template-page-templates.page-template-page_front-page.page-template-page-templatespage_front-page-php.logged-in.admin-bar.group-blog.wpb-js-composer.js-comp-ver-4.12.1.vc_responsive.customize-support
body {
    color: #767676;
}
body {
    font-size: 14px;
}
body, #mainnav ul ul a {
    font-family: 'Lato', sans-serif;
}
body {
    font: 14px/24px "Source Sans Pro", sans-serif;
    background: #fff;
    color: #767676;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
Inherited from html.js_active.vc_desktop.vc_transform
html {
    font-size: 10px;
    -webkit-tap-highlight-color: transparent;
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
Pseudo ::before element
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Pseudo ::after element
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

Hello there

Thank you for reaching out to us here.

Could you please share the link to one of your pages, so I could troubleshoot it easier?

Regards,
Kharis

Sure! Here is one of them http://staging6.kinian.net/sponsored-athletes/

Thank you!

Hello there,

Thank you for sharing the link.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (min-width:769px){
	
	.entry-content > .vc_row{
		background-position: top center !important;
	}
	
}

Let me know how it works.

Regards,
Kharis

Hi Kharis, that didn’t work. I removed all of the css I tried as well just to be sure and it didn’t work.

Hello there,

This is what I am seeing now: https://cloudup.com/cGmjYx0IiQy. It is different with the previous. Maybe I suggested incorrect code as I might not understand your objective clearly. Could you please take a screenshot with some annotations to explain your objective?

Regards,
Kharis

hi Kharis! I would like for every page to look like the frontpage basically. I don’t want any color behind the menu bar I would like the header picture to fill up that space. Here is the link to my homepage. http://staging6.kinian.net/. I tried making the space transparent but all it does is change it to white and the picture still starts below this section. I hope this makes more sense, sorry!

Hello there,

Please try this one:


@media only screen and (min-width:769px){

	body:not(.home) .site-header.fixed {
		background: transparent !important;
		position: fixed !important;
	}	
	
	body:not(.home) .site-header.fixed.float-header{
	  background-color: rgba(0,0,0,0.9) !important;
	}	
	
	body:not(.home) .entry-content > .vc_row{
		background-position: top center !important;
	}
	
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Kharis unfortunately this didn’t work either. Would you like to have access to my site so that you can troubleshoot it directly? If so send me a private email and I will give you admin access.

Thank you!

Hello there,

You can privately send the working login credentials to kharisblank@gmail.com. Enclose the link to this thread please.

Regards,
Kharis