- This topic has 9 replies, 3 voices, and was last updated 3 years, 11 months ago by Leo.
-
AuthorPosts
-
January 31, 2020 at 8:59 am #1150586Daniel
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 #1150660LeoStaffCustomer 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 ๐
March 7, 2020 at 4:02 am #1187724DanielThanks 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 #1187966DavidStaffCustomer 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; }
March 9, 2020 at 1:30 am #1189231DanielThanks, David, it worked
March 9, 2020 at 4:10 am #1189414DavidStaffCustomer SupportYou’re welcome
April 25, 2020 at 3:11 am #1254718DanielHi 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 #1255210LeoStaffCustomer SupportHave you solved this?
The menu seems fine to me:
https://www.screencast.com/t/V1T9Rx3brjhApril 29, 2020 at 1:33 pm #1261877Danielyup, I got it.
April 29, 2020 at 1:34 pm #1261880LeoStaffCustomer SupportAwesome ๐
-
AuthorPosts
- You must be logged in to reply to this topic.