CSS Code to remove header image

blog cover image
7
1.2K followers

Can anyone tell me if there is additional CSS code that I can use to remove a header image for one page on my website (I want to keep the navigation menu).

I am using GeneratePress Premium and created the page in Elementor

Thanks,

Mary Ann

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training

Recent Comments

6

{Visibility: hidden !important; } will hide the image, but the space that it takes up will remain there.

{Display: none !important;} will remove both the image and the space that it takes up - collapsing the space around it.

I hope this helps!

Isaiah 😊

Hi Isaiah. Is there more to the code? I tried both and they came up with errors. I don't do a lot of coding so I copied exactly what you gave. They both came up with errors.

Thanks,
Mary Ann

Yes - you need to apply this to the actual CSS class or ID that's attached to that header image.

If you right click on your header image, and click "Inspect Element", it will open up a window at the bottom of the page with that element highlighted. You should see an Id or class associated with your image.

You want to apply these styles to that id in your css. in the screenshot below - when I inspect the Google logo, it reveals to me the id on the logo as "hplogo". Using this, my css would be

#hplogo {visibility: hidden !important;}

or

#hplogo { Display: none !important;}

I went into customization under appearance, found the page and where it says additional CSS, put it there. I got this message:

There are 2 errors which must be fixed before you can save.

Is there another place - I don't want to make more problems.

Hi Isaiah.

Sorry I missed the info above and decided to go with a simple anchor menu that works great for the page.

Using the Canvas layout in Elementor I got rid of the header (and unfortunately both menus). Then I just inserted an anchor text to the home page). Now if someone goes to the page I created in Elementor, they can see the Home item, click on it and it will take them back to my website with the full primary and secondary menu.

I will save your info though in case I want to try it on my other two websites.

Thanks again,
Mary Ann

It's good. Glad that you managed a work around to fix it.

See more comments

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training