XF 2.1 How to keep radius setting for Tab Menu when scrolling ?

[Nicolas FR]

Hello,

As title...
How to do that ? When you scrolling the radius settings is off and the selected tab is all square !

Thanks !

 

[Joan1211]

Hello, Have you figured out how to do?
I have the same problem. when the menu is opened, the selected tab become square

 

[Nicolas FR]

Hello,
Add this to your extra.less template

.p-navSticky.is-sticky .p-nav .p-nav-list .p-navEl.is-selected, .p-navSticky.is-sticky .p-nav .p-account {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

 

[Joan1211]

Unfortunately this does not work. ( I also tried to add !important )

 

[Nicolas FR]

Yeah, you already add some CSS in your extra.less template concerning the navigation area, right ?
To remove sub-navigation in particular...

The code i provided you works with original style.
It should work...

 

[Joan1211]

Yes indeed i have used extensively extra.less
I have a default/original style.
I have removed everything from extra.less and after trying again, i still have the same problem. after clicking on the menu that has a drop-down menu, the borders become squares.
View attachment borders.mov

 

[Nicolas FR]

My bad, my code theoretically keeps the radius when scrolling and the navigation bar is sticky. I didn't notice you were talking about the problem when the tab is open... But it's weird because originally the open tabs keep their radius, you can test here... So I guess there is some code somewhere that causes this.

You can try this:

.p-nav-list .p-navEl.is-menuOpen {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

 

[Joan1211]

Super! it worked

Another point less important:
I noticed that when I move the mouse between the menu, during few milliseconds the radius disapear.

View attachment Screen Recording 2023-03-13 at 21.31.55.mov

 

[Joan1211]

By the way @Nicolas FR I noticed that on your forum, when you hover the menu there is no radius on the corners not sure if it is on purpose.

 

[Nicolas FR]

By the way @Nicolas FR I noticed that on your forum, when you hover the menu there is no radius on the corners not sure if it is on purpose.

Yes, that's designed like this, my navigation bar is not customized at all.

I noticed that when I move the mouse between the menu, during few milliseconds the radius disapear.

You can try this if you want

.p-nav-list .p-navEl-link.p-navEl-link--splitMenu {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.p-nav-list .p-navEl {
    border-top-left-radius: 4px;
}

 

[Joan1211]

That doesn't work either.
I have reduce the issue by changing the background color when hovering. The white makes the problem quite visible, with a blue-ish color it is a bit less visible.

Thanks anyway for your help.