chojo

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


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

1692985181727.png


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

Thank you!
 

Attachments

  • 1692985104934.png
    1692985104934.png
    5.7 KB · Views: 10
Solution
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:

Code:
@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.
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:

Code:
@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.
 
Last edited:
Solution

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back