Flatsome Fancy Icon Nav

CSS

/* SIDE NAV CSS DESKTOP */
.mfp-content {
    width:  30% !important;
    /* OPTION TO MAKE NAV TRANSPARENT */
    /* DELETE OR TURN TO 1 IF YOU DONT WANT THE MENU TO BE TRANSPARENT */
    opacity: 0.95 !important;
}
li.html.custom.html_nav_position_text {
    padding:  0px;
}
.sidebar-menu.no-scrollbar {
    padding:  0px !important;
}
li.html.custom.html_topbar_left {
    padding: 0px;
}
/* END SIDE NAV CSS DESKTOP */
------------------------------------------


/* SIDE NAV TABLET */
.mfp-content {
    width:  60% !important;
}

/* REMOVE BACKGROUND MENU SCROLL*/
/* MAKES TSO USERS CANNOT SCROLL ON BODY WHEN MENU IS ACTIVE*/
html.has-off-canvas, html.has-off-canvas body {
    overflow: hidden;
    position: fixed;
    height: 100%;
}
/* END REMOVE BACKGROUND MENU SCROLL*/

/* END SIDE NAV TABLET */
------------------------------------------

/* SIDE NAV MOBILE */
.mfp-content {
    width:  90% !important;
}
/* END SIDE NAV TABLET */

Dark Version

[section class="menu" bg="1612" bg_color="rgb(2, 2, 2)" bg_pos="54% 43%" padding="0px" height="100vh" margin="0px"]

[row style="collapse" width="full-width" v_align="middle" h_align="center"]

[col span__sm="12" align="center" color="light" class="jh-side-nav"]

[gap]

<h1 class="uppercase" style="text-align: center;"><span class="fancy-underline">Site Nav</span></h1>
[gap height="20px"]

[row_inner style="collapse" v_align="middle" h_align="center"]

[col_inner span="4" span__sm="4" span__md="4" align="center" color="light" class="home"]

[featured_box img="83" inline_svg="0" img_width="38" pos="center" title="HOME" link="/"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="center" color="light" class="jh-blog-icon"]

[featured_box img="84" inline_svg="0" img_width="38" pos="center" title="LINK 2" icon_color="rgb(233, 233, 233)"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="left" color="light"]

[featured_box img="85" inline_svg="0" img_width="38" pos="center" title="LINK 3" icon_color="rgb(255, 255, 255)"]


[/featured_box]

[/col_inner]

[/row_inner]
[gap height="22px"]

[row_inner style="collapse" v_align="middle" h_align="center"]

[col_inner span="4" span__sm="4" span__md="4" align="center" color="light"]

[featured_box img="86" inline_svg="0" img_width="38" pos="center" title="LINK 4" icon_color="rgb(255, 255, 255)"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="center" color="light"]

[featured_box img="87" inline_svg="0" img_width="38" pos="center" title="LINK 5" icon_color="rgb(233, 233, 233)"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="left" color="light"]

[featured_box img="88" inline_svg="0" img_width="38" pos="center" title="LINK 6" icon_color="rgb(255, 255, 255)"]


[/featured_box]

[/col_inner]

[/row_inner]
[gap height="22px"]

[row_inner style="collapse" v_align="middle" h_align="center"]

[col_inner span="4" span__sm="4" span__md="4" align="center" color="light"]

[featured_box img="89" inline_svg="0" img_width="38" pos="center" title="LINK 7" icon_color="rgb(255, 255, 255)"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="center" color="light"]

[featured_box img="90" inline_svg="0" img_width="38" pos="center" title="LINK 8" target="_blank" icon_color="rgb(233, 233, 233)"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="left" color="light"]

[featured_box img="91" inline_svg="0" img_width="38" pos="center" title="LINK 9" icon_color="rgb(255, 255, 255)"]


[/featured_box]

[/col_inner]

[/row_inner]
[gap]

[gap height="15px"]

[row_inner style="collapse" v_align="middle" h_align="center"]

[col_inner align="center" color="light"]

<p>Add anything else here! Maybe a email option, or social links! Be creative:)</p>
<p>Change the background of the section for what ever you want!</p>
<p>If you wish to support me ane help me make more content like this $1 will go a long way!</p>
<p><a class="button primary" href="https://www.paypal.me/jerrickhakim/1" target="_blank" rel="noopener">SUPPORT</a></p>

[/col_inner]

[/row_inner]
[gap height="15px"]

<h5><span style="color: #ffffff; font-size: 75%;">Copyright [ux_current_year] Your Website! | Verison .01</span></h5>

[/col]

[/row]

[/section]

Light Version

[section class="menu" bg="1612" bg_color="rgb(245, 245, 245)" bg_pos="54% 43%" padding="0px" height="100vh" margin="0px"]

[row style="collapse" width="full-width" v_align="middle" h_align="center"]

[col span__sm="12" align="center" class="jh-side-nav"]

[gap]

<h1 class="uppercase" style="text-align: center;"><span class="fancy-underline">Site Nav</span></h1>
[gap height="20px"]

[row_inner style="collapse" v_align="middle" h_align="center"]

[col_inner span="4" span__sm="4" span__md="4" align="center" color="dark" class="home"]

[featured_box img="83" inline_svg="0" img_width="38" pos="center" title="HOME" link="/"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="center" color="dark" class="jh-blog-icon"]

[featured_box img="84" inline_svg="0" img_width="38" pos="center" title="LINK 2" icon_color="rgb(233, 233, 233)"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="left" color="dark"]

[featured_box img="85" inline_svg="0" img_width="38" pos="center" title="LINK 3" icon_color="rgb(255, 255, 255)"]


[/featured_box]

[/col_inner]

[/row_inner]
[gap height="22px"]

[row_inner style="collapse" v_align="middle" h_align="center"]

[col_inner span="4" span__sm="4" span__md="4" align="center" color="dark"]

[featured_box img="86" inline_svg="0" img_width="38" pos="center" title="LINK 4" icon_color="rgb(255, 255, 255)"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="center" color="dark"]

[featured_box img="87" inline_svg="0" img_width="38" pos="center" title="LINK 5" icon_color="rgb(233, 233, 233)"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="left" color="dark"]

[featured_box img="88" inline_svg="0" img_width="38" pos="center" title="LINK 6" icon_color="rgb(255, 255, 255)"]


[/featured_box]

[/col_inner]

[/row_inner]
[gap height="22px"]

[row_inner style="collapse" v_align="middle" h_align="center"]

[col_inner span="4" span__sm="4" span__md="4" align="center" color="dark"]

[featured_box img="89" inline_svg="0" img_width="38" pos="center" title="LINK 7" icon_color="rgb(255, 255, 255)"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="center" color="dark"]

[featured_box img="90" inline_svg="0" img_width="38" pos="center" title="LINK 8" target="_blank" icon_color="rgb(233, 233, 233)"]


[/featured_box]

[/col_inner]
[col_inner span="4" span__sm="4" span__md="4" align="left" color="dark"]

[featured_box img="91" inline_svg="0" img_width="38" pos="center" title="LINK 9" icon_color="rgb(255, 255, 255)"]


[/featured_box]

[/col_inner]

[/row_inner]
[gap]

[gap height="15px"]

[row_inner style="collapse" v_align="middle" h_align="center"]

[col_inner align="center"]

<p>Add anything else here! Maybe a email option, or social links! Be creative:)</p>
<p>Change the background of the section for what ever you want!</p>
<p>If you wish to support me ane help me make more content like this $1 will go a long way!</p>
<p><a class="button primary" href="https://www.paypal.me/jerrickhakim/1" target="_blank" rel="noopener">SUPPORT</a></p>

[/col_inner]

[/row_inner]
[gap height="15px"]

<h5><span style="font-size: 75%;">Copyright [ux_current_year] Your Website! | Verison .01</span></h5>

[/col]

[/row]

[/section]