Does anyone know what's the css code to make an always burger icon on side menu?

Hey I want to make the sidemenu always a burger even on the desktop (originally just for a tablet and handphone).. How I change the css code? what code do I need to change?

mvp_badge
MVP
Solution

Hi Jason,

For the mentioned use-case, I have drafted a solution. See this sample app: Hamburger Menu in Desktop Mode (TWA)

Solution: Add the below mentioend CSS rules in the Stylesheet section of the Menu WebBlock defined under the Common UIFlow > Menu

CSS Snippet:

.desktop .menu-icon {
    cursor: pointer;
}

.desktop .menu-icon,
.landscape .menu-icon {
    display: inline-flex !important;
}

.desktop .layout-top .Application_Menu.is--visible {
    pointer-events: auto;
}

.desktop .layout-top .Application_Menu.is--visible:before {
    opacity: 1;
}

.desktop .layout-top .Application_Menu {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.desktop .layout-top .Menu_TopMenus {
    position: fixed;
}

.desktop .layout-top .is--visible .Menu_TopMenus {
    transform: translateX(100%);
}

.desktop .layout.layout-top .Menu_TopMenus {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

.desktop .layout-top .Menu_TopMenus {
    background-color: var(--color-neutral-0);
    box-shadow: var(--shadow-xl);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    width: var(--side-menu-size);
    left: calc(0px - var(--side-menu-size));
    transform: translateX(0);
    -webkit-transition: transform 430ms ease-out;
    transition: transform 430ms ease-out;
}

.desktop .layout-top .Application_Menu:before {
    background-color: rgba(0, 0, 0, .1);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 530ms ease-out;
    transition: opacity 530ms ease-out;
    width: 100%;
}

.desktop .header .Menu_TopMenu>div {
    border-bottom: var(--border-size-none) solid transparent;
    border-left: var(--border-size-m) solid transparent;
    border-top: var(--border-size-none) solid transparent;
    padding: var(--space-base);
}

Note: I have just cloned the default Hamburger menu style definition for the tablet mode and linked the same to the .desktop class.


Hope this helps you!


Kind regards,

Benjith Sam

Hi, thanks for your help. That's what i'm looking for

mvp_badge
MVP

You're welcome, Jason

Glad to help you :)


Kind regards,

Benjith Sam

Hi Jason,

You can change the CSS how Benjith explained or select the value of pixels for the device to be considered a tablet.

Example:
If you are using the Common\LayoutTopMenu Web Block, go to that WB. There you can see that it's using the Layouts\LayoutMenuTop.
In the Widget Tree, click once in Layouts\LayoutMenuTop.
Go to properties and expand the DeviceConfiguration. You can then set the TabletWidth.

Best regards,
Miguel Garcia

Hi Jason,

Can you provide more information? Is this for a Web application? Do you want to keep the Common Menu or just the burger?

This is for a traditional web application.
Yeah I want the menu become always burger feature and keep the common menu. I think I just need to change the desktop css to be same like the tablet? But what's the code that I need to change? Thankyou in advance

mvp_badge
MVP
Solution

Hi Jason,

For the mentioned use-case, I have drafted a solution. See this sample app: Hamburger Menu in Desktop Mode (TWA)

Solution: Add the below mentioend CSS rules in the Stylesheet section of the Menu WebBlock defined under the Common UIFlow > Menu

CSS Snippet:

.desktop .menu-icon {
    cursor: pointer;
}

.desktop .menu-icon,
.landscape .menu-icon {
    display: inline-flex !important;
}

.desktop .layout-top .Application_Menu.is--visible {
    pointer-events: auto;
}

.desktop .layout-top .Application_Menu.is--visible:before {
    opacity: 1;
}

.desktop .layout-top .Application_Menu {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.desktop .layout-top .Menu_TopMenus {
    position: fixed;
}

.desktop .layout-top .is--visible .Menu_TopMenus {
    transform: translateX(100%);
}

.desktop .layout.layout-top .Menu_TopMenus {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

.desktop .layout-top .Menu_TopMenus {
    background-color: var(--color-neutral-0);
    box-shadow: var(--shadow-xl);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    width: var(--side-menu-size);
    left: calc(0px - var(--side-menu-size));
    transform: translateX(0);
    -webkit-transition: transform 430ms ease-out;
    transition: transform 430ms ease-out;
}

.desktop .layout-top .Application_Menu:before {
    background-color: rgba(0, 0, 0, .1);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 530ms ease-out;
    transition: opacity 530ms ease-out;
    width: 100%;
}

.desktop .header .Menu_TopMenu>div {
    border-bottom: var(--border-size-none) solid transparent;
    border-left: var(--border-size-m) solid transparent;
    border-top: var(--border-size-none) solid transparent;
    padding: var(--space-base);
}

Note: I have just cloned the default Hamburger menu style definition for the tablet mode and linked the same to the .desktop class.


Hope this helps you!


Kind regards,

Benjith Sam

Hi, thanks for your help. That's what i'm looking for

mvp_badge
MVP

You're welcome, Jason

Glad to help you :)


Kind regards,

Benjith Sam

Hi Jason,

You can change the CSS how Benjith explained or select the value of pixels for the device to be considered a tablet.

Example:
If you are using the Common\LayoutTopMenu Web Block, go to that WB. There you can see that it's using the Layouts\LayoutMenuTop.
In the Widget Tree, click once in Layouts\LayoutMenuTop.
Go to properties and expand the DeviceConfiguration. You can then set the TabletWidth.

Best regards,
Miguel Garcia

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.