[Resolved] How to Add Shadow to Header and Primary Menu for both desktop and mobile version

[Rajesh]

Hi, Will you please share CSS to add shadow to the header and primary menu like this site http://www.kerrycricket.com/. And I want to know how to add the same shadow for the mobile version.

[Leo]

Hi there,

Give this CSS a shot:

.site-header, #mobile-header {
    -webkit-box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.08);
    -moz-box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.08);
    box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.08);
}

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

Let me know 🙂

[Rajesh]

Thank you, it has worked.

[Leo]

No problem 🙂

[Rajesh]

Hai, This code is not showing shadow in the mobile header, earlier it has worked but now it is not working. So please help me.

[David]

Hi there,

Try this:

.site-header, #mobile-header {
    -webkit-box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.08);
    -moz-box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.08);
    box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.08);
    position: relative;
    z-index: 1;
}

[Author]

Posts