[Support request] Adding button to top bar

Home Forums Support Adding button to top bar

  • This topic has 7 replies, 2 voices, and was last updated 8 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1146557
    Matt

    I’m really struggling to add a button to the top bar. I have followed the adding buttons article but can’t seem to select the right class within the additional CSS. Nothing seems to change. Even when doing it through the inspect tool.

    At present this is the html I am using in the top bar widget: <a href="#">Contact Us</a>

    Then I am looking to start my additional CSS:

    .button.top-bar{
    }

    But nothing seems to be happening. Any help would be massively appreciated.

    #1146722
    David
    Staff
    Customer Support

    Hi there,

    so you’re button HTML should look like this:

    <a class="button" href="#">Contact Us</a>

    That code alone will style it like a button using the fonts and colors set in the customizer.

    If you want to style it differently to the theme then include the additional class in the HTML – as is explained here:

    https://docs.generatepress.com/article/adding-buttons/

    If you still have an issue – link me to the site so i can take a look

    #1146841
    Matt

    Sorry David, I added the wrong code into that message

    Contact Us

    This is what I have set in the top bar. But when I follow the article to add the CSS I’m struggling.

    I don’t have the live URL set-up yet and am using my host files to work on our server environment. Is this something you could get onto?

    #1146853
    David
    Staff
    Customer Support

    Can you resend your button HTML – before submitting highlight it and click the Code button

    #1146875
    Matt

    sorry about that. <a class="button top.bar" href="#">Contact Us</a>

    Has that worked?

    #1146880
    David
    Staff
    Customer Support

    That did work 🙂

    So this top.bar is invalid – you can’t include certain characters like . when declaring a class attribute in HTML.

    As the top-bar class is already being used by the theme i would suggest this as your HTML:

    <a class="button topbar" href="#">Contact Us</a>

    Then you can use this CSS rule:

    .button.topbar {
    /* Your styles here */
    }
    #1147198
    Matt

    Legend, thanks for this. Working perfectly now!

    #1147199
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.