- This topic has 22 replies, 3 voices, and was last updated 3 years, 5 months ago by Leo.
-
AuthorPosts
-
October 21, 2020 at 11:26 am #1498802jregist
I’ve used this article – https://docs.generatepress.com/article/centering-logo-navigation/ – to try to get my logo to be centered with split navigation. However, I can’t seem to get it to just keep this same format when I scroll down the page. I used the
Check this page — https://gfa.wishfulthinking.us/residential/ — to see what I mean. Seems like it should be easy to just turn off the change to a different sticky formatting. But I’m probably missing something.
Thanks,
Joel
October 21, 2020 at 11:27 am #1498803jregistOops. The password is chicagoarchitect
Thanks!
October 21, 2020 at 12:03 pm #1498835LeoStaffCustomer SupportHi there,
It doesn’t look like you’ve followed the instruction completely.
For example, I’m not seeing the
menu-item-separator
added as instructed in step 5 here:
https://docs.generatepress.com/article/centering-logo-navigation/Can you make sure to use the exact steps detailed in the article and that the CSS match as well?
Thanks!
October 21, 2020 at 4:51 pm #1499085jregistActually I don’t see that CSS Class (optional) option in the UI. So I just used the auto-assigned menu selector “#menu-item-823” in my CSS.
October 21, 2020 at 4:57 pm #1499092ElvinStaffCustomer SupportHi,
You can enable the CSS class option on the Main menu UI through the “Screen Options” button on the upper right-hand side of the Appearance > Menu page. It’s on the left side of “Help” button.
Here’s a demo on how to enable it – https://share.getcloudapp.com/6quPZLYw
October 22, 2020 at 7:17 am #1499821jregistOk — I have made that change to get everything the way it was in the article. Still when I scroll down on this page – https://gfa.wishfulthinking.us/residential/ – I get the header moving over to left above the nav.
Joel
October 22, 2020 at 7:19 am #1499824jregistNevermind. I think I figured it out. Added this code and the logo stays in the center
@media (min-width: 769px) {
#sticky-navigation .main-nav,
#sticky-navigation .main-nav .menu-item-separator {
flex: 1;
}#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}October 22, 2020 at 7:22 am #1499831jregistDo you have any ideas to keep the original size and top and bottom spacing of the nav and logo when I scroll?
October 22, 2020 at 11:27 am #1500335LeoStaffCustomer SupportCan you try activating this option and see if it works better?
https://docs.generatepress.com/article/navigation-as-a-header/Let me know ๐
October 22, 2020 at 11:52 am #1500370jregistThe menu loses its formatting when I activate nav-as-header. However, when I scroll down the Sticky formatting looks perfect.
October 22, 2020 at 11:55 am #1500378LeoStaffCustomer SupportTry adding this CSS as well:
.main-navigation .main-nav { flex-grow: 1; }
October 22, 2020 at 11:59 am #1500388jregistThat’s looking much better. I still have some jerky reformatting that’s going on but should be able to figure that out.
October 22, 2020 at 12:10 pm #1500407LeoStaffCustomer SupportCan you try removing the sticky navigation logo?
https://docs.generatepress.com/article/sticky-navigation/#sticky-navigation-logoOctober 22, 2020 at 12:34 pm #1500434jregistRemoving the sticky logo completely? Done.
October 22, 2020 at 9:34 pm #1500701LeoStaffCustomer SupportHmm it’s super strange that the logo disappears.
The logo should remain in the static navigation when the navigation as a header option is used as seen here:
https://www.screencast.com/t/KFJUNzruI tried for awhile but unable to replicate the issue on my end.
Is there a chance you can disable all plugins except GP Premium, remove your custom CSS except the centering logo CSS and make sure there is nothing conflicting?
Let me know ๐
-
AuthorPosts
- You must be logged in to reply to this topic.