How To Get this type of gradient header both in mobile and PC and Homescreen

Hi there,

try adding this CSS:

.main-navigation {
    background-image: linear-gradient(to right, rgb(47, 42, 252) 0px, rgb(33, 195, 255) 100%);
}

You can use this site to generate your gradient:

https://cssgradient.io

Thanks David. It works and looks fine on desktops but on mobile device the nav bar became transparent

Can you share a link to your site? You can edit the original topic and update the Site URL. Let me know.

Hello, I have updated our link. Check the desktop version, the gradient is only applied to the nav menu, not the full header. We need the gradient on both mobile and desktop header.

Go to Customizer > Layout > Header and check Navigation as Header

Hello, David thanks that worked. Now we want some customization for home screen layout on the mobile device. We are currently using WP show post pro to show a particular category article on our home screen. Currently, our home screen on mobile looks like this> https://prnt.sc/snfucd. We want to make this look like this > https://prnt.sc/snfur1. Is it possible? If yes please guide me.

Thanks and Regards

Can you raise a new topic - this will make it easier for you and others to find these answers in the future.

Okay sure David

Thanks