[Resolved] Can we Copy Header from Site Library

[Sourabh]

Done, It’s looking good Now what ??

http://venusentertainments.com/

I also need CSS code for small shadow for header at the bottom, and when i scroll down then header should shrink a bit

[David]

Add this CSS to add shadow:

.main-navigation,
.sticky-enabled .main-navigation.is_stuck,
#mobile-header {
    position: relative;
    box-shadow: 0 3px 5px 3px rgba(0,0,0,0.25);
}

You can reduce the Menu Item height in Customizer > Layout > Sticky Navigation – this will reduce its height for when its sticky.

[Sourabh]

David i am sorry, forgot to mention that, Shadow should appear when someone hovers on the header??

So update the code pls…

[Tom]

Try this:

.main-navigation {
    transition: box-shadow 500ms ease-in-out;
    position: relative;
}

.main-navigation:hover {
    box-shadow: 0 3px 5px 3px rgba(0,0,0,0.25);
}

[Sourabh]

hi, when I use this, shadow visible only when in normal mode, when scroll and navigation become sticky I can’t see any shadow during hover ???

also secondray navigation color is black so even shadow does not apper when secondary active, So do the needful please…

[Sourabh]

hi, when I use this, shadow visible only when in normal mode, when scroll and navigation become sticky I can’t see any shadow during hover ???

also secondary navigation color is black so even shadow does not appear when secondary active, So do the needful, please…

Also let me know how to center align secondary nav menus ??

[David]

Replace Tom’s CSS with this:

.main-navigation,
.sticky-enabled .main-navigation.is_stuck,
#mobile-header {
    box-shadow: 0 3px 5px 3px rgba(0, 0, 0, 0);
    transition: all 300ms ease-in-out !important;
    position: relative;
}

.main-navigation:hover,
.sticky-enabled .main-navigation.is_stuck:hover,
#mobile-header:hover {
    box-shadow: 0 3px 5px 3px rgba(0, 0, 0, 0.25);
}

[Sourabh]

Also let me know how to center align secondary nav menus ??

[Sourabh]

Yes good CSS worked, fine but small issue observed that when i scroll that sticky header to mid of my site and then click on the search box then the box open it seems misaligned, check –

http://venusentertainments.com/

Also let me know how to center align secondary nav menus ??

[Tom]

Can you try removing the sticky menu height option in Customize > Layout > Sticky Navigation?

Which secondary nav menus?

[Sourabh]

In Customize > Layout > Sticky Navigation – Menu Item Height is Zero PX, Now still the problem is same ?? still search box height is above and seems misaligned (when u scroll) –

http://venusentertainments.com/

Also, let me know how to center align menus in the Secondary header??

[David]

In the Customize > Layout > Sticky Navigation – DELETE the value in the Menu Item Height, DO NOT set it as 0 or any other value, it will then inherit the static navs height.
Then clear your plugin caches. As you’re developing your site i would recommend disabling your cache plugin until you are ready to go live with the site, this will make sure you’re seeing the changes you make

You can set the Secondary Nav alignment to center in Customizer > Layout > Secondary Navigation.

I would recommend you also read some of our Documentation eg.

https://docs.generatepress.com/article/secondary-navigation-layout-overview/

[Sourabh]

Fine its Done….Thanku David

[David]

You’re welcome

[Author]

Posts