Solved

How can I edit an app's css?

onyx_au
Explorer
63 1 20

Hey guys,

 

I installed 'Smart Mega Menu & Navigation' (https://apps.shopify.com/smart-menu) and their in-app customisation is lacking. I have found elements in right click > inspect and have edited elements to see how it looks, but when I go to theme.css and add it there, it doesn't work.

 

Something simple as, doesn't work;

.tmenu_submenu_mega_fullscreen {
padding: 0px !important
}

 

How can I edit an app's css? Can it be done?

 

My wesbite: www.onyxhive.com.au

All I want to do is add a bottom border color and get rid of the padding.

Edit: There is another user with the same problem, but the apps css uses !important tags throughout. Thread: https://support.qikify.com/portal/en/community/topic/customise-the-css-on-smart-menu. Though, even with the reps answer, I still can't target what I need to in theme.css


Thanks

Accepted Solution (1)

tim
Shopify Expert
3138 199 1144

This is an accepted solution.

Oh, using !important does not always mean it can't be overridden.
Say, they have this rule:

.tmenu_submenu_mega_fullscreen {
    padding: 40px 0!important;
}

If you write something like this in your theme.css, this would not work, because your rule will apply first, and their rule will override because it has the same specificity:

/* your rule */
.tmenu_submenu_mega_fullscreen {
  padding: 0px !important;
}
  ... 
/* their rule applied later, when their app loads, wins because it has same specificity, but introduced later */
.tmenu_submenu_mega_fullscreen {
  padding: 40px 0 !important;
}

So you need to make your rule win because of higher specificity -- here is the easy one:

/* your rule with higher specificity */
body .tmenu_submenu_mega_fullscreen {
  padding: 0px !important;
}

I like to use a body as parent here because obviously, all elements are part of the body, therefore this is a tell-tale that you're not targeting specific element, but are trying to override other rule in case someone else will look at this.

View solution in original post

Replies 5 (5)

tim
Shopify Expert
3138 199 1144

This is an accepted solution.

Oh, using !important does not always mean it can't be overridden.
Say, they have this rule:

.tmenu_submenu_mega_fullscreen {
    padding: 40px 0!important;
}

If you write something like this in your theme.css, this would not work, because your rule will apply first, and their rule will override because it has the same specificity:

/* your rule */
.tmenu_submenu_mega_fullscreen {
  padding: 0px !important;
}
  ... 
/* their rule applied later, when their app loads, wins because it has same specificity, but introduced later */
.tmenu_submenu_mega_fullscreen {
  padding: 40px 0 !important;
}

So you need to make your rule win because of higher specificity -- here is the easy one:

/* your rule with higher specificity */
body .tmenu_submenu_mega_fullscreen {
  padding: 0px !important;
}

I like to use a body as parent here because obviously, all elements are part of the body, therefore this is a tell-tale that you're not targeting specific element, but are trying to override other rule in case someone else will look at this.

onyx_au
Explorer
63 1 20

@tim  THANKYOU! That solved it!

Just one more thing, sorry, are you able to help me add a bottom border color and thickness code? I tried and seems not to be applying a border color. I am pretty sure I am targeting the wrong element

I need a 3px bottom border with colour #470052 on the mega menu. Just mimics the nav bottom border.

tim
Shopify Expert
3138 199 1144

that would require (the border is actually 5px)

.tmenu_submenu_mega_fullscreen:before {
    border-bottom: 5px solid #470052;
}

 

onyx_au
Explorer
63 1 20

Thank you! @tim 

adeelsikander
Shopify Partner
1 0 0

Thanks, @tim Have been playing around with the CSS of 'Smart Mega Menu & Navigation'  since the last three days as I wanted to remove the box shadow from the mega menu container. Your answer worked for me. Great work. Cheers.