How to completely disable horizontal navigation via CSS

Darkle

Hi, I'm trying to completely disable horizontal navigation and keep vertical navigation at all times, I guess there would be no problem to do it with CSS overriding the styles that are introduced when you reach that certain page width... I'm trying to locate all the styles that change, but I can't figure it all out, does anyone know what all these CSS styles are or where I should look for them in the core repository to get the full list?

SychO

Are you referring to the side navigation on the index page? I'm assuming you wish to have it the same as in the tags page at all times? it would probably be best to look at the tags CSS code that achieves it, if I'm not mistaken, it should be this part here: https://github.com/flarum/tags/blob/4d6749f0cf56a3e2a617a62636d66dfaa2b04d25/less/forum.less#L74-L94

Darkle

SychO Oops I hadn't seen your reply, sorry maybe I explained wrong, actually I was referring to keeping regular navigation when the page has a width between (min-width: 768px) and (max-width: 991.98px) which in that case it collapses and goes horizontal:

SychO

Darkle Oh I see, I understood it the other way around.

Yeah you would have to override the styles to not change to horizontal display, which is not pretty, the relevant CSS code is here: (a few lines above - L49 - you can see the class being applied on tablet view and lower)

https://github.com/flarum/framework/blob/bc671b8563693bb34f3c17647aa602346fc1cbbe/packages/core/less/common/sideNav.less#L79-L114

Ideally, in 2.0, horizontal vs vertical display will be a simple CSS rule or variable change.

Darkle

SychO Finally found what I was missing, thanks a lot!

Ideally, in 2.0, horizontal vs vertical display will be a simple CSS rule or variable change.

That would be really cool, that kind of 2.0 stuff has me super excited 🤩