Reduce Padding in Primary Mobile Menu?

Support
#1

First, thanks for providing this great knowledge base and support forum! As a new user I have been able to find about 95% of the answers I need without having to post a question, and I have learned a lot in the process! Many of the questions that I still don’t have answers for seem to be as a result of the Theme’s styling that I don’t know how to access.

I learned in another thread how to reduce the padding in mobile menu sub-items:

body .mobile .x-nav li > ul a {
padding-top: 5px !important;
padding-bottom: 5px !important;
}

This worked great for the sub-items, but I would also like to change the primary menu items:

The three sub-menus have reduced height buttons due to the CSS above, but the four primary menu items above are still too tall. My specific question:

  • How do I use similar CSS to reduce the padding on the primary items?

My more general question:

  • Where can I find the CSS that X Theme uses to control menu bars (and everything else!) in the first place so I don’t have to keep bothering you nice people in support?

Thanks!

#2

Hello Ergo,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

.x-navbar .mobile .x-nav li > a {
    padding: .25em .50em;
}

Most of the CSS you can find in /wp-content/themes/x/framework/legacy/cranium/dist/css/site/ethos.css. However, I suggest you to use Google Chrome dev tools to find out the CSS and making the changes. Here’s resource that you can take a look.

Thanks.

#3

Hi Prasant,

You rock! Thanks for the code and the excellent links on where we can find more self-help. Hopefully we won’t be bothering you so much in the future!

#4

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#5

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