Gradient background for entire header

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.

Hey Epic,

Thanks much! I will give that a try.

Kris

Thanks Epic :)

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

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...

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

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

Hi Leo,

Makes perfekt sense... thanks that worked!

Kris

Glad to hear :)

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.

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

Thanks :)

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...

Try .main-navigation as the CSS selector.

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

Thanks!

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

My Blog - Techshole.com