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

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 :)

Thank you, it has worked.

No problem :)

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.

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;
}