How to remove the "white space" behind the menu

Hi,

My Website http://www.homejeevesdrivers.com/

My front page is correct. I want the rest of my site to look the same.

How to remove the “white space” behind the menu/header?

Thank you,
Frank

Hi,

My Website http://www.homejeevesdrivers.com/

My front page is correct. I want the rest of my site to look the same.

How to remove the “white space” behind the menu/header?

Thank you,
Frank

Dear Frank,

Try adding the below CSS code into your site’s additional CSS option (Appearance > Customize > Additional CSS).


.site-header:not(.float-header){
  background: transparent !important;
}

Let me know how it goes.

Regards,
Kharis

It worked for one page.
http://www.homejeevesdrivers.com/traveling-with-children/

It did NOT work for these two pages.
http://www.homejeevesdrivers.com/get-the-app/
http://www.homejeevesdrivers.com/drive-for-us-2/

I am listing below all of the custom CSS code that is on my site. I put this on at this forum’s sugestion months ago.

Maybe there is a conflict?

.site-header:not(.float-header){
background: transparent !important;
}

body:not(.home) .site-header{
position: relative !important;
}

/* Remove excess top space */
#pg-1920-0 > .panel-row-style,
.page.page-id-1920 .page-wrap,
.page.page-id-1920 .page-wrap .content-wrapper{
padding-top: 0 !important;
}

.slide-inner {

    text-align: left;

    padding-left: 15px;

}

.text-slider .maintitle:after {

left: 0;

    margin-left: 0;

}

/* Remove the page title */
.page .entry-header{
display: none;
}

/* Remove excess top space */
#pg-1491-0 > .panel-row-style,
.page.page-id-1491 .page-wrap,
.page.page-id-1491 .page-wrap .content-wrapper{
padding-top: 0 !important;
}

#mainnav ul li a,
.text-slider .maintitle,
.text-slider .subtitle{
-webkit-text-stroke: .5px #252525;

}

/* Remove the page title */
.page .entry-header{
display: none;
}

Hello there,

It appears those two other pages have different header setup, thus you will need different CSS code. Use this one:



@media only screen and (min-width:992px){
  
  body.page-id-1920 .site-header,
  body.page-id-1491 .site-header{
    position: fixed !important;
  }  
  
}

Those pages have IDs: 1920 and 1491, if you have other pages with similar fashion, you need to apply the same style. To find the page ID, edit page, in the address bar you’ll see something like:

http://www.homejeevesdrivers.com/wp-admin/post.php?post=1920&action=edit

Regards,
Kharis

Hi Kharis,

That did not work.

Kind regards,
Frank

Hello there,

What will happen if you temporarily remove the below custom CSS code:


body:not(.home) .site-header {
    position: relative !important;
}

Regards,
Kharis

Your suggestion worked but the menu rose up and is now half outside of the screen on those two pages.

To move down the menu, add the below custom CSS:


#mainnav{
  margin-top: 30px;
}

> … and is now half outside of the screen on those two pages

Please take a screenshot illustrating that situation. For the image, upload it to the file hosting service like Google Drive and Dropbox, and then share the public link into it here.

Regards,
Kharis

It is now perfect!
Thank you!
Thank you!
Thank you!

Excellent! I’m glad to know it helped.

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