Custom Navigation for mobile

[chojo]

Hi,
I'm working on a new theme for my forum and my main navigation is rounded, like this :

The problem i'm facing is that on mobile, the nav bar and the off-canvas are both rounded which is not pretty.

What I'm searching to accomplish is to have both of them square on mobile only. Anyone know how to accomplish that?

Thank you!

 

[Russ]

Where are you adding the CSS for the rounded corners?

 

[chojo]

Where are you adding the CSS for the rounded corners?

 

[Russ]

Yeah by default XF inherits that to the off-canvas menu I believe.

I'd remove it from there, add it to your extra.less:

@media (min-width: (@xf-publicNavCollapseWidth + 1)) {
.p-nav { border-radius: 99px; padding: 10px; }
}

This CSS will only apply to the nav bar before it collapses to the off-canvas menu.

 

[Russ]

Just a follow up... realized my CSS was missing a {, may have caused errors if you copied it. I've updated the post.

 

[chojo]

Awesome, that's exactly what I needed.
Thank you Russ