[Resolved] Catalyst Demo Site Query

[Oisin]

Hi,

I recently downloaded the Catalyst demo site but want to reduce the height of the hero image. I first had trouble figuring out where to access the hero image but later found it under appearance > elements.

I can’t see any way to reduce the height and I’m not really a coder. Can someone tell me where I can do this?

Thanks,

Johnny.

[Oisin]

I figured it out. It’s the padding that I have to change. I always thought padding was the space around an image rather than the settings for image height and width.

Does anyone know a good resource to teach myself all this stuff?

Thanks,

Johnny.

[Tom]

Glad you got it figured out!

Our documentation has tons of great information. For example: https://docs.generatepress.com/article/header-element-overview/#padding

Let me know if you have any other questions 🙂

[Oisin]

Hi Tom,

Another question on the theme. My website shows the Catalyst logo on mobile. I can’t find where it’s pulling the image from as I’ve deleted all demo content from the media.

Do you know where I go to change this to my own logo and delete whatever media ghosts are floating around my site?

Many thanks,

Johnny.

[David]

Hi there,

go to Customizer > layout > Header and edit the Mobile Header Logo – add your logo there.

[Oisin]

Cheers David,

Appreciate the guidance. I wonder why it’s not in “Site Identity”. Seems that would be more intuitive for people getting used to WordPress.

I have one more question about this logo. For some reason, when the header breaks for mobile the logo is way too big. I tried adding a small logo but this didn’t help. It’s like there must be something in the code telling the logo to be bigger than it is on desktop. Website is loadlabz.com.

Many thanks,

Johnny.

[David]

The mobile header is an optional feature and if you were building from scratch the position of it would be apparent, but we need to add some documentation to some of the Sites, as users installing them won’t be aware. So really appreciate the feedback.

Logos in the mobile header are like the navigation logo and respect the menu item height. You can simple use this CSS to reduce its height without changing the menu item height:

.site-logo.mobile-header-logo img {
    padding: 20px;
}

[Oisin]

Thanks David,

That worked perfectly. The support for this theme is excellent.

Best regards,

Johnny.

[David]

Glad to be of help and you’re finding the service of value. Much appreciated.

[Oisin]

Back again with another question.

When I use the sections option to build a page, the hero image gets pulled from “Elements” in the appearance section. All pages seem to be set to pull from the Global Header. How to do I tell a page to pull from a particular page? Or tell a header element to only appear on a specific page? The display rules don’t seem to offer an option to point it at a particular page.

Thanks very much,

Johnny.

[Oisin]

Nevermind, I see what I have to do now.

[David]

Glad to hear you found the solution.

[Oisin]

Final question… for today at least.

I’m using the hero image from elements. The “smooth-scroll button ghost” is pulling a turquoise colour from somewhere for hover. I can’t find an option to change it anywhere. I’ve looked through the Customise options and I’ve tried all the Home Header options to no avail. Do you know where I can change it?

[David]

It uses this CSS that you can find in Customizer > Additional CSS:

.button.ghost:hover,
.button.ghost:active {
    color: #ffffff;
    background: transparent;
    border: 2px solid #08cec7; /* change the hex color here */
}

[Oisin]

Thanks David. I’m a complete noob to all this, so really appreciate the help.

[Author]

Posts