14hqprojects · Member · October 30, 2019 at 5:11 pm
Copy link

Add topic to favorites
I would like to know if there is any advice and/or code i can use to accomplish the following when viewing on a desktop:

1) When scrolled to the top (on top of Feature Slider at the top of the page), I’d like to change both the logo and the header links (including the more ‘+’ button) on the nav bar to White (#ffffff) and the header links to Grey (#999999) when hovered over.

2) When scrolling down and showing a white nav menu bar, I’d like to change both the logo and the header links (including the more ‘+’ button) on the nav bar to Black (#000000) and the header links to Grey (#999999) when hovered over.

3) Currently, the max number of header links on the nav bar is 6 before they are displayed on 2 lines instead of 1. I would like to allow the maximum number of header links to be 8 before going down to another line.

Thanks in advance.

The blog I need help with is: (visible only to logged in users)
djordjegrubac · Theme Author · November 4, 2019 at 2:58 pm
Copy link
Hello,

Here are the answers on your questions:
1. Q: When scrolled to the top (on top of Feature Slider at the top of the page), I’d like to change both the logo and the header links (including the more ‘+’ button) on the nav bar to White (#ffffff) and the header links to Grey (#999999) when hovered over.
A: To change logo to the white you will need to upload white logo, but in that case logo will not be visible in inner pages.
To change navigation menu items color to white on the homepage, and grey on hover, please add the following classes to Custom CSS:
```
.home .main-navigation a {
color: #fff;
}

.home .main-navigation a:hover {
color: #999;
}
```
Please note if you set static header, then white links will not be visible.

2. Q: When scrolling down and showing a white nav menu bar, I’d like to change both the logo and the header links (including the more ‘+’ button) on the nav bar to Black (#000000) and the header links to Grey (#999999) when hovered over.
A: Logo can not be altered using CSS. Only links. To change links color in inner pages, please add these classes to Custom CSS:
```
.main-navigation a {
color: #000;
}

.main-navigation a:hover {
color: #999;
}
```
3. Q: Currently, the max number of header links on the nav bar is 6 before they are displayed on 2 lines instead of 1. I would like to allow the maximum number of header links to be 8 before going down to another line.
A: Can you add more links to the main nav, so I can check what can be done?

Thank you,
– Djordje

No items found.