How can I modify an app's CSS for better customization?

Store Design
1

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

2

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.

3

@tim_1 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.

4

that would require (the border is actually 5px)

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

Thank you! @tim_1

6

Thanks, @tim_1 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.