- This topic has 9 replies, 3 voices, and was last updated 2 years, 9 months ago by
Leo.
-
AuthorPosts
-
January 31, 2020 at 8:59 am #1150586
Daniel
Hi, I have sticky navigation enabled on my website and I want the menu bar to have one background color when the user opens the website (white) and another background color as they scroll down (black).
Also for, the sticky navigation, I want the background hover color to be white, the text color to be white, the hover text color to be blue and the same settings (white background blue text) to apply to the current field the user is on.
January 31, 2020 at 10:11 am #1150660Leo
StaffCustomer SupportHi there,
Since you are using a header element on every page already, you can turn on the merge option:
https://docs.generatepress.com/article/header-element-overview/#site-header
https://docs.generatepress.com/article/header-element-overview/#merge-with-contentThen set specific navigation colors for the header element which will apply to the static navigation:
https://docs.generatepress.com/article/header-element-overview/#navigation-colorsThen the sticky navigation will inherit the setting from the customizer.
Similar example here:
https://docs.generatepress.com/article/navigation-as-a-header/#merge-with-header-elementsLet me know if this helps ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 7, 2020 at 4:02 am #1187724Daniel
Thanks for the answer, Leo. I’m not sure I quite understood, do I have to do this for every page in which I have a hero banner?
If so, that would be too time-consuming as I have a different hero banner for every page and over 60 pages and I would also like the sticky navigation to work on posts pages that don’t have hero banners.
Can I get a CSS that will make the menu bar black when users scroll down (sticky navigation) and the menu field to turn white on hover, while the menu text would be white and the hover text color would be black?
March 7, 2020 at 7:31 am #1187966David
StaffCustomer SupportHi there,
try this CSS:
.main-navigation.navigation-stick, .main-navigation.navigation-stick ul ul { background-color: #000; } .main-navigation.navigation-stick .main-nav ul li a, .navigation-stick .menu-toggle { color: #fff; } .main-navigation.navigation-stick .main-nav ul li:hover>a, .main-navigation.navigation-stick .main-nav ul li:focus>a, .main-navigation.navigation-stick .main-nav ul li.sfHover>a, .main-navigation.navigation-stick .main-nav ul li[class*="current-menu-"]>a { background-color: #fff; color: #1e72bd; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 9, 2020 at 1:30 am #1189231Daniel
Thanks, David, it worked
March 9, 2020 at 4:10 am #1189414David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 25, 2020 at 3:11 am #1254718Daniel
Hi David, I just noticed that when on mobile, when I click on the menu button while browsing, the background and the letters are both white and this makes the menu items invisible. How do I make the menu items black without messing up any of the settings we previously set with the above-mentioned code?
April 25, 2020 at 8:51 am #1255210Leo
StaffCustomer SupportHave you solved this?
The menu seems fine to me:
https://www.screencast.com/t/V1T9Rx3brjhDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 29, 2020 at 1:33 pm #1261877Daniel
yup, I got it.
April 29, 2020 at 1:34 pm #1261880Leo
StaffCustomer SupportAwesome ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.