[Resolved] Gradient background for entire header

[Kris]

Hi Tom and Team,

See the linked page. The client would like to make the background color of the header a gradient. In the example, you can see that I was able to underlay the gradient using a merged header with a Beaver Builder row. That works for all BB pages but we would rather apply that to the entire site except the front page.

The CSS code is not a problem but what classes or Ids should I target.

Thanks much,
Kris

[epickenyan]

Here is an example I borrowed for my site from the design of the Kinsta blog.

.inside-header {
    background: -webkit-linear-gradient(-30deg,#00004d 0%,#5333ed 49%,#2cd4d9 100%);
}

Just an FYI.

[Kris]

Hey Epic,

Thanks much! I will give that a try.

Kris

[David]

Thanks Epic 🙂

[Kris]

Hi Epic and David,

That worked like a charm.

Now how can I exclude the Front Page or a particular page?

Would it be best to use an element in some way?

Thanks much,
Kris

[Kris]

Actually I should give you more information.

The client wants to merge the front page header with a hero image on the front page and all other pages will have the gradient in the header.

I have a header element setup for this but the .inside-header CSS is overriding that.

Thanks much…

[Kris]

I tried excluding the page id class like so but that did not exclude any page…
.inside-header:not(.page-id-9) {
background-image: linear-gradient(-90deg, #a1ce57, #ffffff);
}

Cheers

[Leo]

Page id is in the body tag so try this:
body:not(.page-id-9) .inside-header

[Kris]

Hi Leo,

Makes perfekt sense… thanks that worked!

Kris

[Leo]

Glad to hear 🙂

[Sibi Paul]

I tested that Code in GP header… it worked…

But, My Current Settings is “Use Navigation as Header”

So, How Can I Modify it to Show Gradient in Navigation Header?

Kindly Help me…

Thanks.

[Leo]

Any chance you can open a new topic for your question?

Thanks 🙂

[Sibi Paul]

My Question is Exactly Related to This Topic…

Gradient Color in Header…

My Header is Navigation Bar.

So, A little modification to the Above code may work…

[Leo]

Try .main-navigation as the CSS selector.

If this doesn’t work then please open a new topic.

Thanks!

[Ranjeet Singh]

please tell how to add header gradient background in My Hindi Blog Amp Pages.

My Blog – Techshole.com

[Author]

Posts