Button hovered links

  • I really find link colors tricky; I would love to see a definite tutorial on how to go about using all the settings available…

    This time I have two buttons on this page linked (the ones with Claude in the name top left)
    The hover color is picking up a blue text from somewhere – I have gone into every setting, checked the customizer, but nothing I do can make it use the hover (or hover-link) text color I want

    Link supplied…

    Regards, Dave

  • I seem to have fixed it – played around by clearing colors from links – not sure which one fixed it!

    But I placed the first one on a page to test, and it had an underline on it to indicate a link !
    Any idea why ?

    TIA, Dave

  • Hi Dave,

    May I know which button has the underline?

  • I had removed it, but just put it back in the footer – you will see 2 x Book an appointment buttons
    The Right Hand side one is the culprit!
    But when I view the page the underline does not show – but it does in edit mode ?
    So maybe all OK – but I guess why ?
    Dave

  • There is only one Book an Appointment button in the footer, and it’s on the left side. I assume that’s not the button you’re referring to?

    I’m not sure why the underline is showing in the editor. If you’d like us to take a closer look, you can provide a temporary admin login.

  • Hi Alvind,
    I have been working on the buttons, and mostly OK now.
    But as mentioned, the buttons in the footer (an element) shows the link text as underlines, but OK when saved and viewed.
    If you want need to login let me know.

    But more importantly another button has me stumped!
    There is a Book and Appointment button on the menu – it is listed as the last item in the menu – but I cannot figure out how to re-style it! (another developer initially setup this site who I cannot contact)

    TIA, Dave

  • Update: I found the CSS in the customizer.
    I removed it and added the css class that all the other buttons use, but it has dark text intitially and an underline on hover! So is picking up some othe CSS from somewhere ?

    Thoughts ?

    TIA, Dave

  • Yes, it’s using the color you set for the navigation.

    Your global style is only using class .button-primary-claude. If you want to override the navigation link color, you need to use the class .button-primary-claude a, and add !important to the color property in the CSS edit mode.

    And the underline is from this CSS in customizer> additional CSS:

    .main-navigation .main-nav ul li a:hover {
        border-bottom: 2px solid;
    }

    I would recommend create the button using a block element – hook instead of a regular menu item. You can use GB button block, and use menu_bar_items hook.

  • Thanks Ying,
    After my last post it occured to me that using elements.
    I’ll implement that
    Best regards, Dave

  • You are welcome   🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.