CSS Code to remove header image
7
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
Create Your Free Wealthy Affiliate Account Today!
4-Steps to Success Class
One Profit Ready Website
Market Research & Analysis Tools
Millionaire Mentorship
Core “Business Start Up” Training
Recent Comments
6
Create Your Free Wealthy Affiliate Account Today!
4-Steps to Success Class
One Profit Ready Website
Market Research & Analysis Tools
Millionaire Mentorship
Core “Business Start Up” Training
{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. How to customize your site with custom CSS rules. The right way . 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.