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
[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"]
1071 KM AmsterdamContact
[/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💎 Improve your Flatsome design in 30 minutes
Get 22 design tips that every Flatsome site could use.
Flatsome tutorial
Linktree alternative build with WordPress & Flatsome
Create your own link page like for social media with
Flatsome tutorial
Flatsome Custom Product Layout like Amazon
Create a custom product layout like Amazon for your WooCommerce