Button with external link in Top bar

Hi Sven,

The custom HTML added through the widgets seem to be missing a tag.

I see that you have <href tel:+496691806500="">+49 (0)6691 806 500</href>

It should be <a href="tel:+496691806500">+49 (0)6691 806 500</a>

And for the other one I see you have <href mailto:info@office-rs.de="">info@office-rs.de</href>

Which should be <a href="mailto:info@office-rs.de">info@office-rs.de</a>

Hi Elvin,
thank you very much. I don`t know how this stupid mistake came up.
Now that`s clear. Thank you again.
My original problem came up by trying to add a button in the widget. For that I tried this post:
https://generatepress.com/forums/topic/top-bar-with-a-button-link/

But the css instructions don`t work on my site. Any idea?

Hi Sven,

Since you are already using GenerateBlocks, I believe this solution would be better:
https://youtu.be/yAleVWQi5EA

Let me know if this helps :)

Hi Leo,
thank you very much for your support and the great video. But I`m afraid it is not the solution I´m looking for.
If you take a look at my page, you`ll see on the left top side the secondary menu. On the right top side the top bar widget with three individual html elements.
Like it looks now, it is (almost) what I want. Generally absolutly simple.

What the problem is: if you hover over the individual html elements, you can not see them anymore because the text color obviously changes to white. same for the visited link.
This is, like I already mentioned, a "problem" and I don´t find the css instruction for that. Additional css doesn`t overwrite.

What would be nice to have: Links in secondary menu and individual html (top bar widget) are underlined while hovering + the Login links should be highlighted like a button.

With your video I can somhow build a workaround. But I would like to keep the secondary menu AND I want these links at the maximum width of the device. Correct me, but with the element solution I can only bring it to the width of the page settings, right?

Hi Sven,

Try this CSS to change the hover effect:

body .secondary-navigation .top-bar a:hover, body .secondary-navigation .top-bar a:focus, .secondary-navigation a:hover {
    color: #222222;
    border-bottom: 1px solid #222222;
    margin-bottom: -1px;
}

For the log in button, you can add more style to it:

aside#block-13 {
    background-color: grey;
    padding-left: 10px;
    padding-right: 10px;
}

Correct me, but with the element solution I can only bring it to the width of the page settings, right?

The element solution can be made to full width if you set the inner container to full width as well :)

Hi Ying,
that worked perfect. Thank you very much for your great support!

You are welcome :)