[Resolved] Top Bar With a Button Link

[Rika]

Hi Support,

I would like to add a widget area in the top bar with a text and a button link. I’m going to use the “HTML” widget option but is not code-savvy.

Will it be possible for you to provide me with some code to accomplish this. I will adjust the code as required and sort out the alignment and background color.

I would like to replace a notification plugin I currently use.

Thanks

Rika

[David]

Hi there,

this would be the HTML you require:

<div class="top-bar-cta">
	<span class="top-bar-cta-text">My call to action text</span>
	<a class="button top-bar-cta-button" href="full_url_for_the_button_link">My button</a>
</div>

Then you can add this CSS to style it:

/* Align text and button horizontally */
.top-bar-cta {
    display: flex;
    align-items: center;
}

/* Add space to right of text */
.top-bar-cta-text {
    margin-right: 20px;
}

/* Style button */
a.top-bar-cta-button {
    border-radius: 4px;
    padding: 8px 16px;
    background-color: #f00;
    color: #fff;
}

/* Style button on hover */
a.top-bar-cta-button:hover {
    background-color: #000;
    color: #fff;
}

In the Customizer > Layout > Top Bar – you can set the alignement to center and add some top and bottom padding to stop the button from touching the edges.

And you can change the background color of the Top Bar in Customizer > Colors > Top Bar.

[Rika]

Thanks David.

It works perfectly. Much appreciated.

[David]

Glad to hear that!

[Sven]

Hi David,
I add this code also to my hp. But with less success. Button and Text appears at the right place. the css instructions have no effect. What do I wrong?

fyi: You helped me already out with some customization which influenced th top bar. But I have no idea what we did those days. So maybe it depends on that.

[David]

Hi Sven,

if you want to raise a new topic where you can share a link to your site we can take a look 🙂

[Author]

Posts