Hello - I'm using Lifestyle2 and i have published a menu to the off canvas module. I want to reduce the space between menu items. I believe this is the right code to do so.

.nav > li > a [
position: relative;
display: block;
padding: 3px 5px;
]

but I don't think i'm putting it in the right place. WHen i inspect the element, it says that it's in bootstrap.css

how do i add a custom css to bootstrap?? I have added it to the custom css of the template but that didn't work.

Hi,

You just need to add it to the custom.css file and make sure its specific enough to override it. Adding !important will do that. But #t3-off-canvas li a{} should do as well.

BTW the brackets need to be curly rather than square ones.

Thanks

thank you. Yes i was aware of the {}, that was just so it would stick in the post.

the !important was what did it. I don't know why i keep forgetting to try that first!

thanks.

Ah great

www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

With important

The only way to override an !important declaration is by using an even more specific !important declaration. This can make the stylesheets quite cluttered and very difficult to maintain.

I have seen users use !important on lots of styling so if possible I'd use increased specificity if possible

Cheers
Paul