- This topic has 17 replies, 4 voices, and was last updated 3 years, 4 months ago by David.
-
AuthorPosts
-
December 18, 2020 at 12:08 pm #1586387Harris
Hello,
HOw can i achieve floating logo (outside header) and also the sticky header logo floating.
I tried some examples I found in the documentation with no sucess..main-navigation .site-logo.navigation-logo { position: absolute; left: 0; top: 0; } .main-navigation .site-logo.navigation-logo img { height: auto; /* Set the image height of logo in px */ }
I also tried the way I had handeled it in another site, but its not working either for some reason
/* Set navigation logo to be absolute so itโs not confined to the container */ .main-navigation .sticky-logo { position: absolute; left: 0; top: 0; height: 60px; } /* Set the height of the image to auto (or whatever else) */ .main-navigation .sticky-logo img { height: auto; padding: 0; margin: 0; z-index: 100; }
December 18, 2020 at 8:24 pm #1586648LeoStaffCustomer SupportHi there,
Can you try activating this option first?
https://docs.generatepress.com/article/navigation-as-a-header/Then that CSS should work.
Let me know ๐
December 19, 2020 at 12:39 am #1586735HarrisEdit: Found it. It’s in the bottom. Blind! ๐
Hello,
For some reason this option does not exist
https://i.gyazo.com/115deab39027b7f0f45cf1742d60777b.pngDecember 19, 2020 at 1:05 am #1586748HarrisStill doesn’t seem to be working though….
December 19, 2020 at 1:40 am #1586760HarrisAnd another thing. Why the navigation height does not shrink when turning to sticky?
Primary navigation menu item height is set to 90 and sticky nav menu item height is set to 65
December 19, 2020 at 6:26 am #1586976DavidStaffCustomer SupportHi there,
can you share a link to your site where i can see the issue?
December 19, 2020 at 8:22 am #1587248HarrisSure. I had shared one in the initial post (private info).
I am adding it here tooDecember 19, 2020 at 12:56 pm #1587457TomLead DeveloperLead DeveloperHi there,
The shrinking issue is a bug in 1.12 – it’s fixed in 1.13 which will be released in January.
For now, this CSS should help for both things:
.navigation-stick .site-logo { position: absolute; left: 0; top: 0; } .main-navigation.sticky-navigation-transition .site-logo img { height: auto; } .main-navigation.sticky-navigation-transition .menu-bar-item > a { line-height: 65px; }
December 19, 2020 at 2:30 pm #1587533HarrisThanks Tom!
Should I remove this CSS in the next release?December 19, 2020 at 5:15 pm #1587614LeoStaffCustomer SupportYou can remove this block of CSS only in the next release:
.main-navigation.sticky-navigation-transition .menu-bar-item > a { line-height: 65px; }
December 20, 2020 at 1:37 am #1587795HarrisGreat, thanks!
One last thing.
The logo height I define in the css (instead of the “Auto” provided) makes the logo too big in the mobile sticky view.
Is there some way to resize it just in the mobile and sticky view?Thanks
December 20, 2020 at 11:08 am #1588405TomLead DeveloperLead DeveloperAbsolutely, you can do this:
@media (max-width: 768px) { .main-navigation.sticky-navigation-transition .site-logo img { height: 50px; } }
December 20, 2020 at 10:47 pm #1588726HarrisThanks!
December 21, 2020 at 10:50 am #1589728TomLead DeveloperLead DeveloperNo problem ๐
December 22, 2020 at 2:12 am #1590323HarrisHello,
The css provided resizes the logo in the Mobile sticky header but not in the normal mobile header.
I used this in order to achieve that.Is that right or is there any better way to do it?
@media (max-width: 768px) { #mobile-header .inside-navigation .mobile-header-logo a img{ height:70px !important; } .main-navigation.sticky-navigation-transition .site-logo img { height: 70px; } }
Thanks
-
AuthorPosts
- You must be logged in to reply to this topic.