Make Top bar transparent / merge with Header

[Kim]

Hi there,

would it be possible to make the Top bar transparent and / or merge with the header? I would like to use a page hero and would like the top bar to be part of it.

Many thanks

[David]

Hi there,

when you create a merged site header element – the top bar is included within that.
So you can set the Customizer > Colors > Top Bar colors to make the background transparent.

If you’re only using the merged header on some pages then we would need to use some CSS to target those specific pages to change the colors. Let me know.

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

[Kim]

Hi David,

your support is so awesome! I just want it for some pages.

BR Maike

[Leo]

Try this CSS:

.header-wrap .top-bar {
    background-color: transparent;
}

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

If this doesn’t work, any chance you can link us to the site in question?

Let me know 🙂

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

[Kim]

Hi Leo, this works perfectly 🙂 One more question – how can I change the color of the text and menu items now?

BR Maike

[Leo]

Does the navigation color options within the header element work?
https://docs.generatepress.com/article/header-element-overview/#navigation-colors

If not any chance you can link me to the page in question?

Thanks 🙂

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

[Kim]

Hi Leo, yes it works for the main navigation, but not for the top bar content. Unfortunately it is a local installation at the moment.

BR

[David]

What widgets are you adding to the top bar?

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

[Kim]

It’s a Menu

[David]

Try:

.header-wrap .top-bar a, .header-wrap .top-bar a:visited {
    color: #ffffff;
}

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

[Kim]

Hi David,

works perfectly for the Menu!

Just for testing I’ve added some text to the Top bar…the color doesn’t also change. I’ve added this code:

.header-wrap .top-bar {
    color: #fff;
}

Works fine!

Seems that the the color option in the Header Element does not affect the Top bar at the moment when having a merged header. Maybe something to add in a future version?

Many thanks for your support 🙂

[David]

No the colors only apply to header and primary nav. Neither secondary nav or top bar are affected. It gets real complicated with the additional elements, as the system cannot tell whats in a top bar for example. Most of these things are cured with a little CSS but we’ll take a look to see how we can improve.

Glad to be of help.

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

[Kim]

Many thanks 🙂

[David]

You’re welcome

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

[Author]

Posts