Responsive Menu

Radzen.Blazor Components
1

Hello,
I just written a web shop using the Radzen components as a proof of concept. It all works well except for the menu bar. It's along the top until the screen reaches mobile size at which point it switches to a vertical menu down the sidebar. The problem is that while the screen is shrinking the menu bar does not break across lines and instead disappears off the side of the view port. This leaves the last few menu options unreachable. This is clearly unacceptable. Is there a way to make the menu break across lines?

This for me is a dreadful blemish on what is otherwise a superb set of components. If this is not currently possible do you have plans to fix this and if so what is the timescale. I need to know this as if it's not going to be soon then I will need to use a different component or component set.

Kind Regards

John
Lead Developer.

2

Hi @Hammy1965,

I am afraid I don't understand what the problem is. Please check our forum FAQ for tips how to clarify your question.

3

Korchev,
I'm sorry that you didn't understand. My problem is that the Radzen menu does not wrap. On small viewport sizes the right hand side of the menu disappears off the screen and the menu options are unreachable.

Kind regards

John

4

You can make the menu wrap with a few lines of CSS:

.menu {
   flex-wrap: wrap;
}
.menu .navigation-item-active {
   z-index: 1;
}
5

Korchev,
That worked perfectly. Thank you very much for your help and for the great components.

Kind Regards

John

6

Hi John

I am about to test out the viability of using radzen to build an ecommerce system. Would it be possible to take a look at what you have managed to do?

Cheers
Ross