Flatsome tutorial

How to Create a Full Screen Menu Overlay

In this video tutorial I’ll explain how to create a Fullscreen Menu Overlay. Using the Flatsome Mobile Menu function and UX Builder Block function to create a fully customised menu.

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;
}

Need professional design help?

Let's take your Flatsome shop to the next level.

Seb's design service

💎 Get Seb's 22 Flatsome design essentials

Leave your email and get the free video link