Change active menu link color

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Beaver Builder Theme / Change active menu link color

This topic is: resolved
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #114826

    Kees
    Participant

    Hi there,

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

    Thank you in advance.

    #114967

    Ben Carlo
    Keymaster

    Hey Kees,

    Welcome to the BB forums! 🙂

    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

    #114988

    Kees
    Participant

    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

    #115015

    Danny
    Keymaster

    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.

    https://cloudup.com/caGQIuB5EdG

    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

    #115163

    Kees
    Participant
    This reply has been marked as private.
    #115362

    Danny
    Keymaster

    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

    #115460

    Kees
    Participant
    This reply has been marked as private.
    #115507

    Ben Carlo
    Keymaster

    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. 🙂

    Ben

    #115509

    Kees
    Participant
    This reply has been marked as private.
    #115687

    Danny
    Keymaster

    Hi Kees,

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

    Thanks,
    Danny

Viewing 10 posts - 1 through 10 (of 10 total)

The forum ‘Beaver Builder Theme’ is closed to new topics and replies.