[Resolved] Add shadow effect to the header with css

Home Forums Support [Resolved] Add shadow effect to the header with css

Home Forums Support Add shadow effect to the header with css

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1504237
    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

    #1504318
    David
    Staff
    Customer Support

    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

    #1504336
    Sara Genone

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

    #1504366
    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

    #1504400
    David
    Staff
    Customer Support

    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.

    #1504411
    Sara Genone

    thanks!

    #1504421
    David
    Staff
    Customer Support

    You’re welcome

    #1504457
    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

    #1504488
    David
    Staff
    Customer Support

    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.

    #1504518
    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

    #1504555
    David
    Staff
    Customer Support

    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;

    #1505775
    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!

    #1505944
    David
    Staff
    Customer Support

    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 πŸ™‚

    #1505950
    Sara Genone

    ok

    #1506088
    David
    Staff
    Customer Support

    Thanks!

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.