5
Views
3
Comments
Solved
Expandable Side Menu is behaving in a weird way...
Application Type
Reactive

Hi there.

I have been using a top menu in my app until now, but I decided to use a side menu instead. So I changed the root layout's source block of one of my screens to LayoutSideMenu, and defined the MenuBehavior as Expandable. But, this is happening:

What's that space at the top of the side Menu? Is that normal? How can I fix it?

Any help would be highly appreciated :)

mvp_badge
MVP
Rank: #72
Solution

Hi Yizuhi,

After investigating the mentioned case, I have found that the pre-defined CSS class definition has a small glitch as mentioned below

Incorrect CSS Definition

.desktop .layout-side.aside-expandable .app-menu-content {
    top: var(--header-size); // 56px
}

 

Corrected CSS Definition

Override the CSS class definition with the below-mentioned definition at the application/Theme level stylesheet

.desktop .layout-side.aside-expandable .app-menu-content {
    top: 0;
}


Hope this helps you!


Kind regards,

Benjith Sam

Rank: #2824

Thank you so much, that worked perfectly. 

mvp_badge
MVP
Rank: #72

You're welcome, Yizuhi.

Glad to help you :)


Kind regards,

Benjith Sam