Removing description on primary and top menu

HI Nathan, your issue is not clear, can you explain your issue Clearly and paste code snippets here.

https://www.phoneandtabletreviews.com/

If you look at Categories 1,2,3,4 in primary menu, they have a description shown. I do not want that.

I have tried making my child theme and using the following code

#main-navigation .sf-menu a span.menu-description {
display: none;
}

But this did not work, I believe because there is an !important next to the similar code in the parent mesocolumn folder for the style css. I think this because I run a debug that showed

#main-navigation .sf-menu a span.menu-decsription {
display: inline !important;
color: #333;
}

Note that there is a spelling mistake in the above code (I got this directly from a debug of my webpage)

The spelling mistake is coming from the parent mesocolumn theme and not my child theme

Hi Nathan, The Quick Solution is

#main-navigation .sf-menu a span.menu-decsription {
display: none !important;
color: #333;
}

This will solve your issue.

You have to apply this code, since you have use display : inline ; It showing, by this, element will hide from that location, to remove this permanently one you need to little dig into super-fish.js and super-fish css files, it seems it’s coming by some jQuery,

any way you can solve the problem by top css code part.

I had this question too and it worked! Thank you. ??

Hi Nathan, The Quick Solution is

#main-navigation .sf-menu a span.menu-decsription {
display: none !important;
color: #333;
}

This will solve your issue.

You have to apply this code, since you have use display : inline ; It showing, by this, element will hide from that location, to remove this permanently one you need to little dig into super-fish.js and super-fish css files, it seems it’s coming by some jQuery,

any way you can solve the problem by top css code part.

That does not work. As you can see from my website, I copied the code into my child theme and no change.

It still does not work. I copied it into my child theme and as you can see from my website via debug, it still does not work.

I just noticed it works when I enter the code into Custom CSS. But in my css child theme it does not work

Maybe you have a syntax error in your Child Theme style.css file?

/*
Theme Name: Mesocolumn-Child
Theme URI:
Description: Child Theme for Mesocolumn
Author:
Author URI:
License:
License URI:
Tags:
Template: mesocolumn
*/

@import url("../mesocolumn/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

#main-navigation .sf-menu a span.menu-decsription {
display: none !important;
color: #333;
}

No syntax issue…

You’re not using specific enough selectors, try prepending your selectors with the “body” element.

https://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

how about

body#custom #main-navigation span.menu-decsription {
display: none !important;
color: #333;
}

https://ietranslator.sakahay.com

Does anyone know how to change colour of pages ( not background) on free Mesocolumn?

I am having trouble with this too, none of the codes, in child or custom CSS seem to work. Do I need to deconstruct the javascript? Thanks

Actually this code put into custom css that I found in another topic works for me at the moment.
#custom span.menu-decsription { display:none; }