How To Remove Header Image In Lodestar Theme on select pages.

falconeaglehawk · Member · Jun 12, 2017 at 4:16 pm
Copy link

Add topic to favorites
Hi!
Thanks for your help today. I am trying to use Lodestar Theme as a foundation for my personal business website. I would like to know if there is a way to remove the header section (not the navigation bar, just the large image and Site Title and Tagline) from every page except the homepage. There are about 5 pages I would like to remove it from.

Thanks!

Mike

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jun 12, 2017 at 9:13 pm
Copy link
Hi Mike, it appears like you have this solved as I’m seeing only the image on your main page, not on any of your others. Let me know if you still need help with this.
walterdrakejd · Member · Jun 14, 2017 at 7:17 am
Copy link
Hello: I looked at that site and I would like to also remove header, Site Title and Tagline from selected pages. Is there a CSS code for that? Many thanks.
Walter
thesacredpath · Member · Jun 15, 2017 at 1:00 am
Copy link
Hi @walterdrakejd, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.
lauradail · Member · Jun 16, 2017 at 6:08 pm
Copy link
I’m also using Lodestar and would like to know how to remove the header image from other pages, most importantly from my blog page. My site hasn’t been launched yet, but the address will be lauraquere.com
lauradail · Member · Jun 16, 2017 at 6:09 pm
Copy link
I’m also using Lodestar and would like to know how to remove the header image from other pages, most importantly from my blog page. My site hasn’t been launched yet, but the address will be lauraquere.com
thesacredpath · Member · Jun 16, 2017 at 11:58 pm
Copy link
Hi @lauradail, I see a site associated with your username with Lodestar, but I do not see that you have the WordPress.com Premium Plan upgrade, which would be required in order to add the CSS to do this.

I do see a self-hosted site associated with your username on Bluehost, but that site is not yet operational. If you are talking about that self-hosted site, you can post your question at http://wordpress.org/support/ and tag it with wpcom theme https://wordpress.org/support/

Generally what you would need to do is to get the unique page id CSS class from the opening body html tag for the page and then do something like this. This is an example from your WordPress.com site that has Lodestar active on it and is for the About page.
```
.page-id-3 .custom-header-image {
	background: none !important;
}
@media screen and (min-width: 30em) {
	.page-id-3 .custom-header-image {
		padding-top: 5%;
		padding-bottom: 5%;
	}
}
```
This is just the basics.
thesacredpath · Member · Jun 17, 2017 at 12:04 am
Copy link
@walterdrakejd, the procedure for hiding the header image from select pages would be the same as I outlined above for @lauradail.
thesacredpath · Member · Jun 17, 2017 at 12:05 am
Copy link
Except of course, that your site is hosted here at WordPress.com: https://falconeaglehawkwordpresscom.wordpress.com/
lauradail · Member · Jun 27, 2017 at 7:33 pm
Copy link
Thanks so much @thesacredpath!! I just made my site public because it’s so much easier to work through these issues when I can show what I mean. Indeed, the self-hosted site is the one with the issue: http://www.lauraquere.com.

I tried to find the page ID for the blog page. In the url, it says post=7, so I used .page-id-7 but that didn’t work. Am I completely off?
thesacredpath · Member · Jun 28, 2017 at 1:00 am
Copy link
The best way to find the unique page id CSS classes is to use the web inspector built into your browser and look in the opening body html tag. On your Services page, the beginning of that looks like this.
<body class="page-template-default page page-id-2...

For the services page, this would be a starting point for styling that area and removing the image.
```
.page-id-2 .custom-header-image {
	background: none !important;
	background-color: #ccc !important;
	padding-top: 5%;
	padding-bottom: 5%;
	height: 200px;
}
```
If you have any issues, post at http://wordpress.org/support/ and tag it with wpcom theme and someone will help you out.
falconeaglehawk · Member · Jun 28, 2017 at 8:00 pm
Copy link
Hello!

Thank for the help so far. Your helped me to remove the header section (not the navigation bar, just the large image and Site Title and Tagline) from every page except the homepage.

There one more css issue I’d like to address: The navigation bar disappears when a user has scrolled down the page, and is scrolling back up again. This makes it very difficult and counter-intuitive to get to the nav buttons.

The site I am working on is: https://falconeaglehawkwordpresscom.wordpress.com/

but this nav bar disappearing is more evident on the non-index pages such as https://falconeaglehawkwordpresscom.wordpress.com/meet-mike/

Is it possible to make it so the nav bar does not disappear?

Thank you!

dcoleonline · Staff · Jun 28, 2017 at 10:26 pm

Hi falconeaglehawk,

This CSS should keep the navigation visible:

@media screen and (min-width: 60em) {
    .admin-bar .site-header-hidden.header-top {
        top: 32px;
    }
    .site-header-hidden.header-top {
        transform: translate(0);
        animation: none;
    }
}

falconeaglehawk · Member · Jun 29, 2017 at 2:00 pm
Copy link
Great! It worked! Thank you!
dcoleonline · Staff · Jun 29, 2017 at 2:39 pm
Copy link
:) You’re welcome.

The topic ‘How To Remove Header Image In Lodestar Theme on select pages.’ is closed to new replies.

WordPress.com forums

How To Remove Header Image In Lodestar Theme on select pages.