Change custom link text color for menu

Hi there,

Could you please tell me how I can change the color of the custom link in the menu - ‘call now on 01342 323956’

http://samcohouseclearance.co.uk/

Many thanks,
Tom

Hello @Hayward,

Thanks for asking. :slight_smile:

You can change the color of custom menu link either by using menu id or class name.

  1. Menu Id: To change the color using menu id, you can use following CSS:
li#menu-item-415 a span {
    color: #000 !important;
}
  1. To change color by adding class name then you can use following CSS:
.contact-nav a span {
    color: #000 !important;
}

Please change the class name as per your requirement.

I have recorded a screencast that you can take a look in which I have demonstrated how you can change the color using above mentioned methods:

You can refer following article to find out menu id.

https://wpexplorer-themes.com/total/docs/find-menu-id-wordpress/

Thanks.

That’s superb, thank you so much for your help.

I did have one other question. Below most sections on the site there is additional margin or padding which isn’t required. For example section 3 and 5 there’s extra white space which makes the section disproportionate. Could you please explain how to remove this extra space.

I’ve tried to remove the extra space using design options but that didn’t work.

Thanks in advance for your help.

Hi @Hayward,

It’s due to the headline’s margin. Please edit your headline and add mtn to its class option. Seems like you’re using a visual composer. It should be like this

Thanks!

Hi!

Thanks for responding. I don’t actually have a custom headline on the page. I tried the code anyway in the sections which are affected but that’s not worked.

Do you have any other solutions?

Thanks,
Tom

Hi Tom,

I see empty paragraph tags, which you need to remove.

Also you can reduce your margins above headline tags by assigning the class mtn as suggested above.

We have a separate guide on elements spacing, which you can use to find predefined classes (https://theme.co/apex/forum/t/customizations-element-spacing/211).

If you’re still having issues, provide us with your WordPress login credentials in a secure note to check your issue further.

Thanks!

Hey Tom,

There’s a space above your headline. Please note that empty new lines like that will actually cause spaces in the front-end.

I also removed the Gap element above your form so that your headlines align.

Hope that helps.

Hi!

Thank you so much for taking a look at this. I’ve checked and cleared my cache but the extra spacing is still there.

Look at the two examples highlighted in the attachment. These are what I was referencing at the start of the post.

Thank you very much.

Tom

Hello @Hayward,

Thanks for updating the thread. :slight_smile:

I took a look at the section you are referring too. To adjust the spacing, you either adjust heading spacing or section spacing. Please take a look at following screencast. Please use the steps mentioned in the thread to adjust the spacing.

Thanks.

Hi thanks for the reply.

This was the first solution I tried. I’ve just gone back and amended the spacing on all sections in and around where the spacing exists and nothing is changing on the page for me.

Do you know why this might be?

Thank you,
Tom

Hi Tom,

This is the issue if you use the visual tab of the text settings, you can not add a CLASS on it.



Please switch to Text tab and write a class man to your headline (h4)



Do this to all headlines that you have (h1-h6), including that “Call us today 01342 323956

If a huge spacing still remains after this, then that is probably on your content band or column padding/margin.

This green highlighted area is the top footer padding.



You can reduce or remove that by adding this to Theme Options > CSS

.x-colophon.top {
	padding-top: 20px;
    padding-bottom: 20px;
}

I suggest that you built your future pages in Cornerstone instead, It would help a lot.

Thanks,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.