How can I make my Header menu transparent on every page?

How can I make my Header menu transparent on every page - including the Home page, instead of showing black(default) background, I want my menu to be integrated to picture I have on every page?

Also, how can I hide the Header menu and site title when scrolling down the page so that only the header picture is shown?

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

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

    .siteScrolled .sydney-hero-area {
      position: fixed;
      width: 100%;
    }

Regards,
Kharis

Hello! I think I’m having this exact problem as above (“How can I make my Header menu transparent on every page - including the Home page, instead of showing black(default) background, I want my menu to be integrated to picture I have on every page?”)

And I added this CSS code, but nothing changed. I have this white space between the secondary page header and first row.

Thanks!!

non-front page space between menu header and first row|690x305

Hello there,

Please try this code:

    .site-header, 
    .site-header.fixed, 
    .site-header.float-header {
      background-color: transparent;
      position: absolute !important;
      padding: 20px 0 !important;
    } 

Regards,
Kharis

Thanks for your reply. It worked pretty well except:

  • I would like to now EXCLUDE the Home page: instead of showing black(default) background, so that the menu is the integrated to picture I have on every page.
  • Whilst the code works brilliantly when scrolling down pages which are text only, if the page contains an image, the menu image is partially hidden

Hello there,

You can use body:not(.home) CSS selector to exclude the home page. So the code will look like this:

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

    body:not(.home) .siteScrolled .sydney-hero-area {
      position: fixed;
      width: 100%;
    } 

Whilst the code works brilliantly when scrolling down pages which are text only, if the page contains an image, the menu image is partially hidden

Please share a link to your site here, so I can inspect and suggest you with extra code that might be working to resolve it.

Regards,
Kharis

Thanks for your reply - I’ll try the code and let you how it went.

The image I posted with my question shows the header/menu image to the left and right of the main text and image. I would like the header/menu image to be displayed across the whole page.

I’m afraid I cant provide a link, as I’m learning how to build a website using Xampp on my pc.

Once again, thanks for the advice.

I’ve just replied you on your other new topic here:

Let me know how it works for you.

Regards,
Kharis

Hi Kharis,

Have tried the code, but the result is the same as per the image in my previous post. The site header does not show across the page when scrolling, and is “hidden” by the page content.

It’s like, when you insert an image into a Microsoft Word document, the image is “in front” of the text and has to be “moved to back”.

Could there be a problem with conflicting CSS code?

UPDATE:

Kharis,

I commented out the CSS below, and entered the CSS in your post - and all seems well now

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

body:not(.home) .siteScrolled .sydney-hero-area {
  position: fixed;
  width: 100%;
} 

Many, many thanks.

I do not know how I would learn to build websites if it were not for the superb support given here.

V.