one-pager; how to add active colour to navigation items

gerlindevassen

Hi 

I am using a one-page layout http://simonskloof.virtualwebassist.co.za/#accommodation - how can I style the navigation items to show the active state when at a specific section, eg accommodation. 

Thank you

Pablo

Hello,

Please be sure that your "Active Link color" is different than a "Link color" in the Theme Options > Colors > Menu

https://prnt.sc/rur2nr

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

gerlindevassen

Hi Pablo

It is. 

Looking at Dev tools, I can see that the class li.current-menu-item is not being applied when using eg #accommodation as an anchor for that section on the page. 

You can see it works on 'HOME' but not on 'ACCOMMODATION': http://simonskloof.virtualwebassist.co.za

Pablo

All of your links should be 'anchors', please change your "home" link to be a anchor to "#Header"

Also, be sure that you turned on the "One-Page" option while editing the page.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

gerlindevassen

Hi. Done that, but it's still not working. it does not apply the "current" class when you are actually on the section but rather only once after that you go back to home - then all of a sudden 'accommodation' is selected although you're at the top of the page. 

Please can you have a look for me. Thank you

Pablo

Hey,

Please send us WordPress dashboard access privately thru the contact form which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

Notice!
Please attach a link to this forum discussion.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

gerlindevassen

sent. thanks so much )

Pablo

So, it looks like the BeTheme bug, we tested it on our local device and the same issue happen.

For now, we provided the CSS code for your website and it works, in the next updates we'll fix that problem.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

gerlindevassen

thanks a lot. 

i took the site live yesterday and wanted to quickly copy what you did into the live one - I found the css rule: #Top_bar.is-sticky .menu  li:not(.current-menu-item)  a { color:#5f5f5f; } which I added.

Is there anything else you did? It's not working on http://www.simonskloof.com/ 

If you need access to that one I can give it to you - thank you

Pablo

It is working, the color is set as it should be at "Sticky White" style of sticky header, so it's black.

https://prnt.sc/s36k4j

Do you need to change the active color to brown?

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

gerlindevassen

thanks so much. resolved. i appreciate your speedy assistance.