Link on Top Bar adds extra line

Hello @discomidget,

Thank you for reaching out,

The underline style under the links in the backend stems from WordPress and editor styles: https://postimg.cc/Jy7wdcsg.
If you need to set the underline for the top bar, you can put the CSS below in Customizing > Custom CSS/JS > CSS Code:

#top-bar a {
    text-decoration: underline;
}

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

I hope that helps.
Best Regards

Dear Shahin,

Thank you VERY MUCH for your detailed response. I have existing code in the CSS code area and Custom JS is blank. Would I simply copy and paste the CSS code above below the existing code? I will brush up on CSS before I add anything. Are there considerations for what should be at the end of all of the code? Right now the existing code ends with:

}
}

Hello @discomidget,

Thank you for reaching out,

Feel free to put that CSS in the Customizer’s CSS sections.
Regarding the syntax of the CSS please read and follow these articles:
1. https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
2. https://www.w3schools.com/css/css_syntax.ASP

And in the end, you’ll have something like this: https://postimg.cc/CZKbqcNM.

I hope it helps.
Best Regards

I tried the code and see that links now have an underline. But what I was referring to is “when I add a link, an extra line of space is added below the content.”

screenshot of top bar with and without link

I can’t figure out why adding a link to the top bar content makes it take up 2 horizontal lines of space instead of one.

Hello @discomidget,

Thank you for reaching out,

It happens because you use a “<p>” tag on topbar, like this: https://postimg.cc/WDVpv1c2.
You can remove its margin by using the following CSS:

#top-bar-wrap p {
    margin-bottom: 0 !important;
}

Please recheck your issue and keep us posted.

I hope it helps.
Best Regards

THANK YOU! That worked. I looked at the code behind the post and saw the “<p>” tags just like you mentioned. I added the CSS and now the top bar appears correctly.

You’re most welcome.
I’m glad it is resolved.