Changing Header and Footer Color in Generatepress

Hi there,

Our Colors add-on allows you to this in the Customizer, or you can use CSS:

.site-header {
    background-color: #ffffff;
}
.site-info {
    background-color: #ffffff;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know.

Thank you so much Leo. It worked very well with the CSS.

One more question out of the subject, please. Can we put an animated gif with mouse hover into header logo section ? It is like the flip box in elementor.

Thank you.

I believe WordPress allows you to upload .gif files. Have you tried uploading it in Customize > Site Identity?

Hello Tom,

Thanks for the reply. What I want to do is I would like to upload an animated image with mouse hover. That’s to say, I have two logos; one for the company itself and one for the brand registered for the same company.

So when you hover your mouse, you will see the second logo. When you take mouse pointer away, it will.go back to the company logo again.

It is like flip box in Elementor. Could you recommend something for me to do that?

Thanks.

That would take some custom HTML and CSS I’m afraid.

You would also need something like GP Hooks to insert your HTML into the header area.

Something like this:

<div class="flip-images">
    <img src="FIRST IMAGE URL" />
    <img src="SECOND IMAGE URL" />
</div>

Then the CSS:

.flip-images {
  position: relative;
}

.flip-images img {
  position: absolute;
  top: 0;
  left:0;
  z-index:1;
}

.flip-images img:nth-child(1) {
  z-index: 1;
}

.flip-images img:nth-child(2) {
  z-index:-1;
}

.flip-images:hover img:nth-child(2) {
  z-index: 1;
}

Thank you so much Tom.

After receiving your reply, as you suggested, I uploaded an animated PNG via customizer and it works well and accepted. But I will keep this information in case they ask for that. Thanks again.

Can you also help me please about the menu bar color changing. I could manage to change the color of menu bar but couldn’t for the active one and hover colors.

With a color picker, I do check the color code and look for in the page source and try to apply some CSS. But couldn’t do that.

Can you help me please ?

Thanking you !

Hello Tom,

For CSS to change to menu bar color, I have found a link, that you recommended in another thread.

https://gist.github.com/generatepress/793804f553c25c70823c

However, although I copy and paste into Simple CSS and change the colors, it doesn’t work.

What could be the problem ?

Thank you.

Those code should definitely work. We would need to see the site to tell why it’s not working if you can provide a link?

Thank you Leo.. I don’t know why, but it started to work ??

Is it possible to draw rectangle around the menu text ?

Probably some caching issue going on.

Try something like this:

.main-navigation .menu > li > a {
    border: 2px solid #000000;
}

Can you open another topic if you need additional help? Thanks!

Thank you Leo,

Sure I will open another topic.