Change active menu link color

#1

Hi there,

Is there a way to change the color of the active link in the main (topbar) menu?

Thank you in advance.

#2

Hey Kees,

Welcome to the BB forums! :slight_smile:

Did you want to change the color of the menu item which links to the page we’re on? Do you think you can share the URL of the site you’re working on so we can check? You can use the private reply option below.

Ben

#3

Hi Ben,

Actually, I installed Wordpress and Beaver Builder on a local computer, so I cannot share a link.

When I look in the customizer, I cannot find an option to change the color of the menu item which links to the page I am on. Secondly, when I make a one page site (using the BB Theme) with for example 3 link area’s the color of all menu items show as ‘active’, after clicking one menu item. Is there a way to change that in the settings? I am still learning to use Wordpress and I am not a coder…

Other than that, it is really fun using BB!

Thanks,
Kees

#4

Hi Kees,

When you set the “Hover” color for your navigation menu via WordPress Customizer > Header > Header Style > Hover Color. This will also style the current menu/page item as well.

Cloudup

However, you can also use custom CSS if you wish to have a different color to your hover color. If you add the following CSS to your custom CSS you should get a different color.

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li.current-menu-item > a {
  color: #F00;
}

In regards to your other question is it possible for you to provide a screenshot of the problem, please?

Thanks,
Danny

#5

[Content Hidden]

#6

Hi Kees,

  1. The reason for this I believe is that you have two Rows called “About” which is likely causing the issue. Can you remove one and see if this resolves the issue. If it doesn’t can you provide temp admin access, so we can take a closer look.

  2. The reason for this is that you’re actually on the Home page and that is that is why the Home menu item is highlighted. To resolve your issue you will want to remove the Home menu item.

Thanks,
Danny

#7

[Content Hidden]

#8

Hey Kees,

So the problem here is that the link you’re placing on the menu items are the non-www version of the site, i.e., domain.com/#contact. Try changing them to the www version www.domain.com/#contact and that should take care of it.

Also, the details you gave above doesn’t work. :slight_smile:

Ben

#9

[Content Hidden]

#10

Hi Kees,

Happy to hear your issue has been resolved and thanks for informing us.

Thanks,
Danny

closed #11