How to Create a Full Screen Menu Overlay

1. UX Shortcode

 [section label="CSS* Menu Full Overlay" bg_color="rgb(0,0,0)" dark="true" class="menu-full-overlay"]

[row]

[col span="4" span__sm="12" span__md="6" align="left"]

[button text="Shop" letter_case="lowercase" color="white" style="link" size="xxlarge" expand="true"]

[button text="Projects" letter_case="lowercase" color="white" style="link" size="xxlarge" expand="true"]

[button text="Journal" letter_case="lowercase" color="white" style="link" size="xxlarge" expand="true"]

[button text="About" letter_case="lowercase" color="white" style="link" size="xxlarge" expand="true"]

[button text="Contact" letter_case="lowercase" color="white" style="link" size="xxlarge" expand="true"]


[/col]
[col span="4" span__sm="12" span__md="6" align="left" class="sub-links"]

[button text="Armchairs" letter_case="lowercase" color="white" style="link" size="large" expand="true"]

[button text="Chairs" letter_case="lowercase" color="white" style="link" size="large" expand="true"]

[button text="Carpets" letter_case="lowercase" color="white" style="link" size="large" expand="true"]

[button text="Lights" letter_case="lowercase" color="white" style="link" size="large" expand="true"]

[button text="Decoration" letter_case="lowercase" color="white" style="link" size="large" expand="true"]

[button text="Desks" letter_case="lowercase" color="white" style="link" size="large" expand="true"]

[button text="Tables" letter_case="lowercase" color="white" style="link" size="large" expand="true"]


[/col]
[col span="4" span__sm="12" span__md="12" align="left" class="contact"]

[row_inner style="collapse"]

[col_inner span__sm="12" span__md="6"]

Shop
Herengracht 22

1071 KM Amsterdam
[gap height="10px"]

[button text="Directions" color="white" size="smaller" icon="icon-map-pin-fill" icon_pos="left"]

[gap height="10px"]


[/col_inner]
[col_inner span__sm="12" span__md="6"]

Contact
+10 123 456 789
hola@sebdelaweb.com

[/col_inner]

[/row_inner]

[/col]

[/row]
[row]

[col span__sm="12" margin="-30px 0px 0px 0px"]

[divider width="100%" height="2px"]

[row_inner]

[col_inner span="6" span__sm="7" align="left"]

[button text="Privacy policy" letter_case="lowercase" color="white" style="link" size="small"]

[button text="Terms" letter_case="lowercase" color="white" style="link" size="small"]


[/col_inner]
[col_inner span="6" span__sm="5" align="right"]

[follow style="small" facebook="#" instagram="#" twitter="#" youtube="#"]


[/col_inner]

[/row_inner]

[/col]

[/row]

[/section]

2. CSS

/*************** MENU FULL OVERLAY ***************/

.menu-full-overlay .expand, .menu-full-overlay .button span {
    text-align:left;
    margin-bottom: 10px;
    line-height: 100%;
    min-height: 100%;
}

.menu-full-overlay .sub-links, .menu-full-overlay .contact p {
    opacity:0.6;
}

.mfp-bg.off-canvas-center:not(.dark) {
    background-color: #000; /* Change overlay background color */
    opacity: 1;
}

.header-block-block-1, .off-canvas-center .mfp-content {
    width: 100%;
    max-width: 100%;
}

.mfp-ready .mfp-close {
    opacity: 1;
}