Add shadow effect to the header with css

[Sara Genone]

Hi
I need your help to add shadow effect to my navigation menu (both secondary and primary menu and header section)
you can see at this web site https://www.ddsinvestigazioni.it/
something like what I want to realize …
I added this custom css :
.site-header .secondary-navigation .inside-navigation .secondary-navigation
{
-webkit-box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.43) !important;
-moz-box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.43) !important;
box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.43) !important;
}
but It doesn’t work…
Could you help me?
Thank you in advance
Sara

[David]

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

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

[Sara Genone]

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

[Sara Genone]

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

[David]

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.

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

[Sara Genone]

thanks!

[David]

You’re welcome

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

[Sara Genone]

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

[David]

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.

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

[Sara Genone]

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

[David]

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;

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

[Sara Genone]

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!

[David]

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 🙂

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

[Sara Genone]

ok

[David]

Thanks!

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

[Author]

Posts