Navbar - reduce padding on menu items?

[Caracarina]

Hello there,

I’m trying to reduce the padding on the menu items on the header nav bar. In dev tools i can see the padding:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 40px;
padding-right: 40px;
}

But it does not work to copy that CSS into the additional CSS file and reduce the number there, it has no effect.

Please could you let me know how to achieve a 20px padding on each side, and also, if i needed to left align the menu items, how would i do that?

Thank you in advance,
Carin

[Prasant]

Hello Carin,

Thanks for asking.

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

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding: 20px 20px 0 !important;
}

.masthead-stacked .desktop .x-nav {float: left !important;}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[Caracarina]

Hello there,

Thank you very much for the instructions - they worked well.

Regarding the resources - thank you kindly for sending those through - i have some knowledge on CSS but it’s always useful to know more

Thank you again and best regards,
Carin

[kory]

Glad to know things are coming together for you, @Caracarina!

Cheers!