Archived topic
Making the logo bigger than what the main navigation height allows
3 replies · Started by g_younes on July 3, 2019
When the logo is placed inside primary navigation, it takes the maximum height that the navigation allows.
Is there a way to go beyond that?
I have a secondary navigation menu above the primary navigation, and I want the logo to span both of them.
There was a css suggestion from the support in a similar ticket:
https://generatepress.com/forums/topic/circle-shaped-logo-in-navigation-to-span-larger-than-the-navigation/
But the css suggested in there didn't work (it created an additional full-width horizontal bar just for the logo and placed it between primary and secondary navigations, instead of spanning them both together).
I know this could be a bit tricky, especially that I want to preserve sticky navigation (and the primary menu changing to a smaller size along with the logo when scrolling down). It probably needs a lot of custom code to preserve all of that and probably support won't be able to go that far - but thought of asking anyway.
Thank you
Hi there,
Give this CSS a shot:
@media (min-width: 769px) {
#site-navigation .navigation-branding img {
position: absolute;
left: 0;
top: -25px;
height: 75px;
}
}
Let me know :)
Thank you! This actually worked but it's a bit jumpy (not very smooth transition) but I guess it will do for now.
No problem :)