LODESTAR THEME – HOW TO REMOVE HEADER IMAGE (EXCEPT FOR HOME)

roystoneditorial · Member · Oct 20, 2017 at 8:43 pm
Copy link

Add topic to favorites
Hi. I am trying to set up a business website (roystoneditorial.wordpress.com) and am using the Lodestar theme.

I am trying to:

1) Show the same navigation bar at the top of the screen on all pages (without disappearing as your scroll down); and

2) Have the header image (and Title and Tagline) appear only on the Home page (the landing page). Other than the Home Page, I want just the Navigation Bar and then the text.

I’ve found no way to do this. Lodestar isn’t listed in the Themes section of the forums, and the one thread I found on the topic had several examples of CSS code that didn’t work for my site.

Is there any code I can copy and paste or any way to accomplish this design?

I tried to ask the Forum, but was told I should contact WordPress Support, because Lodestar is a free theme.

Any help would be greatly appreciated. Thank you in advance.

The blog I need help with is: (visible only to logged in users)
jessestu · Member · Oct 21, 2017 at 2:08 am
Copy link
Hi @roystoneditorial,

I can help with the header image part.

First things first: I’m assuming you have a plan, Premium or Business, where you can insert custom CSS styling. If you don’t, this won’t work.

Visit this page for Premium and Business plan details: https://wordpress.com/pricing/

Now, assuming you have this option, try this code:
```
/* REMOVES HEADER IMAGE ON NON-HOME PAGES */

.custom-header-image {
	display: none;
}
	@media screen and (min-width: 960px) {
		.header-top {
			position: relative;
			margin-bottom: -40px;
		}
	}

.home .custom-header-image {
	display: inherit;
}
	@media screen and (min-width: 960px) {
		.home .header-top {
			position: absolute;
			margin-bottom: 0;
		}
  }

/* ENDS REMOVES HEADER IMAGE */
```
Note that this code does not make the header stay at the top of the page all the time. I tried to work on that, but it’s problematic: the theme is using Javascript to replace the CSS class dynamically. That makes that nice effect of the header staying at the top then, after one scrolls far enough down the page, it bounces back into a fixed position at the top. That effect throws a wrench in the code that locks the header on the top. I don’t know how to work around that dynamic change on the page. In my tests, the Javascript overwrote my CSS.

Someone else might know how to work around that, but I don’t.

I hope this helps! Good luck!

Best,
Jesse

No items found.