Add shadow effect to the header with css

Hi there,

try adding this CSS:

.secondary-navigation {
    position: relative;
}
.secondary-navigation,
.site-header,
#mobile-header,
.main-navigation .inside-navigation
 {
    position: relative;
    box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.43);
}

Then in Customizer > Layout > Header - set the Header Width to Full

It's work fine
Thank you very much!!!
Sara

Hi David
please take a look here
https://sviluppo.socialmela.it/sviluppo/
can I remove "right and left" shadow to the header (where there is the logo) and leave only the bottom shadow?
Thank you in advance
sara

You need to follow this step:

Then in Customizer > Layout > Header – set the Header Width to Full

You can keep the inner header width contained.

thanks!

You're welcome

Dear David
I can also modify my navigation header to set it in the top of the page (as like as for the primary menu)
when I scroll down a page in the desktop view?
I have to create this web site https://www.ddsinvestigazioni.it/this with Generatepress...
becouse this is very low ...
Thank you in advance
sara

Hi there,

it is possible but you would have to disable the GP Sticky Navigation and add this CSS instead:

@media(min-width: 1025px) {
    .site-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    #site-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 136px;
    }
}

Note: it is not possible to create a transition effect using this method.

The alternative is you can use the Sticky Navigation and increase the Menu Item Height in Customizer > Layout > Sticky Navigation.

Thank you David
I tryed your code.. and it'seems works fine but
there is an initial "strange transaprency effect" ..
Could you check and let me know? It's my problem or for you is it the same?
Thank you in advance
sara

I updated the CSS here to fix that:

https://generatepress.com/forums/topic/add-shadow-effect-to-the-header-with-css/#post-1504488

The change is to include: z-index: 1000;

Dear David
I',m working on customize the web site footer.
I need to be able to put an image as bacground and also equally distribute spacing bwteween 4 widgets.
How can I do this?
I have to build a custom element?
Thank you for suggestions
Sara
P.S. I love your theme :) is very very performant!

Hi Sara,

could raise a new topic as this is one has been resolved - it will also make it easier for you in the future to find these answers :)

ok

Thanks!