[Support request] Adding button to top bar

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

[David]

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

[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?

[David]

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

[Matt]

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

Has that worked?

[David]

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 */
}

[Matt]

Legend, thanks for this. Working perfectly now!

[David]

You’re welcome

[Author]

Posts