Different Header Image for each Menu Page?
-
Hi,
I wonder if it is possible to use a different Header Image in each Menu with CSS, it is?
My Menus are Pages except the Blog which is a Category.Thanks
The blog I need help with is: (visible only to logged in users)
-
-
The Snaps theme does not support different Header image for different pages.
We do have several of themes that would let you do this though. Here are a few:
Here’s a link to all of our themes with this feature:
https://theme.wordpress.com/themes/features/featured-image-header/
-
-
How about targeting specific pages (via page id) and overriding the default header image on those? The best option would be your suggestion, indeed, as the theme will have built-in support for it.
However, for themes that don’t support it, let’s try this “hacky” method. It involves finding the page id and changing CSS for every page, so @axelware, you will have to do most of the work.
@axelware, let’s go through this first on your “Contacto” page. These are the steps:
- Open the page, right-click anywhere and select “Inspect Element”.
- Note down the page id, here’s a screenshot.
It comes out to be page-id-35 for “Contacto” page. For more details, read this guide. Now use the following code snippet to change this page’s header image:
.page-id-35 .site-header { background-image: url(https://awbstudio.files.wordpress.com/2015/10/contacto_02-1.jpg?w=1472) !important; }Pay attention to URL. I’m using the URL of the image found on your Contacto page as an example. To use a different image, first upload an appropriately-sized image to your Media Library, and copy/paste its URL in the parenthesis.
Now, let’s try this for SOBRE MÍ page as well. Go to Inspect Element, page id turns out to be page-id-25. So, the code becomes:
.page-id-25 .site-header { background-image: url(https://awbstudio.files.wordpress.com/2015/10/contacto_02-1.jpg?w=1075) !important; }We need to change page id and image URL for every page where a different header is required. Sounds complex, but is simple! To become more familiar with theme’s CSS, read this guide.
Good luck! :)
-
Thanks guys, just trying to help and learn along the way! :)
@shawnajroberts, can you please look at this thread and report it? Not sure why its design is breaking. I’ve seen it happen in the past as well.
-
ehtis – done. :) It broke because you used a list item tag
<li>outside of an unordered or ordered list tag
<ul> or <ol>List item elements can only be placed within a list element, otherwise things break, as you saw. :)
-
Ah, how could I miss that! My bad. I so wish the edit post feature could somehow be re-enabled. I know, too much of an ask. :)
@timethief, what an honor! :) Super thanks.
-
timethief, not sure if we can talk about this here, but let’s just say I can only try, and that would be a dream come true. :)
-
- The topic ‘Different Header Image for each Menu Page?’ is closed to new replies.
WordPress.com Forums 