Flatsome tutorial

How to Create a Vertical Header in Flatsome

In this video tutorial I’ll explain how to place your header sticky on the left in Flatsome. This solution is made for desktop and it combines the UX Builder with the general WordPress widget function.

1. UX Shortcode

[section label="CSS* Side Header" bg_color="rgb(255,255,255)" video_visibility="visible" class="side-header is-full-height" visibility="hide-for-medium"]

[row label="Side Logo" padding="50px 30px 30px 30px"]

[col span__sm="12"]

[ux_image id="https://old.flatelements.com/wp-content/uploads/2019/03/flatelements-logo-big.png"]


[/col]

[/row]
[divider width="100%" height="1px" margin="0px" color="rgba(138, 138, 138, 0.2)"]

[row label="CSS* Side Nav" style="collapse" padding="20px 20px 20px 20px" class="side-nav"]

[col span__sm="12"]

[ux_sidebar]


[/col]

[/row]
[divider width="100%" height="1px" margin="0px" color="rgba(138, 138, 138, 0.2)"]

[gap]

[follow style="small" align="center" scale="110" facebook="#" instagram="#" twitter="#" linkedin="#"]


[/section]

2. CSS

/*************** SIDE HEADER ***************/

.side-header {
    width: 300px; /* Change Width Step: 1  */ 
    position: fixed;
    top: 0;
    z-index: 999;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    display: inherit;
}

@media screen and (min-width: 849px) {
    #content {
       margin-left:300px; /* Change Width Step: 2  */ 
    }
    .header {
       display:none;
       visibility:hidden;
    }
}

.side-nav .col{ 
    overflow-y: auto;
    max-height:300px; /* Change nav scroll height */ 
}

.side-header .widget {
    margin-bottom: 0px;
}

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