[Support request] Hyperlink styling: apply only to content, not to navmenu?

[Daniel]

I’ve read through a lot of the helpful tips about styling only the links within the content field on my Elementor template, but I’ve been unable to apply the style to “only” on the content. Note how the logo and navmenu have the same link characteristics on the webpage?

[Leo]

Hi there,

Have you checked with Elementor on this?

They should be able to help you out better as everything in your site is coming from Elementor.

Let me know 🙂

[Daniel]

Thanks, Leo. I’ll reach out to them.

[Leo]

Let me know if they aren’t able to help 🙂

[Daniel]

I heard from Usman at Elementor. I prolly didn’t explain my concern well enough.

====

Hi Daniel,

Thank you for reaching out to us.

If you see at the homepage which is https://culturefeed.com/, there is no underline which means you’re using custom styles which is not an elementor’s issue. However, see this file
https://culturefeed.com/wp-content/cache/autoptimize/css/autoptimize_f80995542931e551ab9363765e43230d.css

Autooptimize is generating a css which has this code

a:link {
color: #000;
border-bottom: 5px solid Red;
}

You don’t need that code since that is filling the header with an underline. Rest looks good. Also, we don’t provide support for the custom code and still wanted to help the best I could. This css can be added by 3rd party plugin as well so please make sure to contact the according authors so they can help you with that and we do LOVE helping customers.

Have a good day!

====

That’s a fine and nice answer, but, unfortunately I’m a hack at most of this.

I did, indeed, insert custom css (that bit about the 5px solid red underline), onto a template page, but I guess I still don’t know if I need to insert additional css on the page to define which areas I specifically need to not be underlined. Can you point me to some place where I can research what I need to do? Here’s a brief action-shot of where I’m putting the code. https://drive.google.com/file/d/1kz3AULXTBPMEGDFC9j40YVZpALWSSTS2/view

[David]

Hi there,

is the CSS being added to the widget or the page in Elementor?

[Daniel]

Directly onto the “Custom CSS” panel on the page in an Elementor template. https://drive.google.com/open?id=1kz3AULXTBPMEGDFC9j40YVZpALWSSTS2

[David]

So on that section/page you had selected in the video – on the advanced tab you can add a CSS Class – give it one e.g post-template then change your CSS to this:

.post-template a:link {
    color: #000;
    border-bottom: 5px solid Red;
}

[Daniel]

Awesome! It worked beautifully! I sure am learning a lot from you guys.

Thank you!

[David]

Awesome glad to be of help. When adding CSS to any specific part of the elementor sections / templates / columns ( or whatever ) its always best to add a CSS Class. It will keep it specific to only those elements that have that class. You can then move the CSS to your Child Theme Style Sheet or Customizer > Additional CSS. Its much easier to keep track of it all and make changes to it from one place.

[Daniel]

I guess it’s a related issue, but the underlines are back, but only at the bottom of the page. https://culturefeed.com/beyond-good-intentions/

[David]

If you move the class and that CSS to the specific section that holds your content then it should only apply to that.

[Daniel]

Ok. I’ll keep tinkering with it.

[David]

Also try changing the class post-template to something else, it was a bad choice as i think its being used elsewhere on the template itself. Name it something unique and relevant, i generally prefix my css with my initials eg. db-post-template-style

[Daniel]

That worked like a charm!

Thanks!

[Author]

Posts