- This topic has 3 replies, 2 voices, and was last updated 5 years, 11 months ago by
.
Hi,
I have a one page website and when I scroll down I would like the top navigation menu to change background color depending on which section I am focusing on. So if I scroll down to a “about me” section I want the background color of the “about me” tab in the main navigation menu to change and stay that way as long as I am in the “about me” section. I have this also when I hover the menu, and that works fine. Here is the css I have added:
#page-container .sh-header .sh-nav > li> a:active,
.sh-header .sh-nav > li> a:hover,
.sh-header .sh-nav > li>a:focus {
background-color: red;
}here is also a reference to what I mean: http://www.accomplishmorestressless.com/
Solution for this topic
Hi @Gudrunjons,
I hope you are well today and thank you for your question.
To achieve this you have to develop custom code in the child theme of Jevelin theme as described in the following page.
https://jsfiddle.net/cse_tushar/Dxtyu/141/
http://www.instantshift.com/2014/11/14/jquery-page-scroll-active-menu/
https://ayanize.com/snippets/how-to-highlight-current-menu-items-on-a-one-page-site-in-divi/
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
Best regards,
Shufflehound teamok, I understand. Thank you for your help!
You are most welcome here 🙂
