- This topic has 14 replies, 2 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
October 26, 2020 at 1:51 am #1504237Sara 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
SaraOctober 26, 2020 at 3:08 am #1504318DavidStaffCustomer SupportHi 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
October 26, 2020 at 3:21 am #1504336Sara GenoneIt’s work fine
Thank you very much!!!
SaraOctober 26, 2020 at 3:51 am #1504366Sara GenoneHi 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
saraOctober 26, 2020 at 4:20 am #1504400DavidStaffCustomer SupportYou need to follow this step:
Then in Customizer > Layout > Header β set the Header Width to Full
You can keep the inner header width contained.
October 26, 2020 at 4:32 am #1504411Sara Genonethanks!
October 26, 2020 at 4:43 am #1504421DavidStaffCustomer SupportYou’re welcome
October 26, 2020 at 5:15 am #1504457Sara GenoneDear 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
saraOctober 26, 2020 at 5:31 am #1504488DavidStaffCustomer SupportHi 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.
October 26, 2020 at 6:01 am #1504518Sara GenoneThank 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
saraOctober 26, 2020 at 6:23 am #1504555DavidStaffCustomer SupportI 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;
October 27, 2020 at 1:14 am #1505775Sara GenoneDear 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!October 27, 2020 at 4:04 am #1505944DavidStaffCustomer SupportHi 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 π
October 27, 2020 at 4:11 am #1505950Sara Genoneok
October 27, 2020 at 6:04 am #1506088DavidStaffCustomer SupportThanks!
-
AuthorPosts
- You must be logged in to reply to this topic.