Skip to content

Instantly share code, notes, and snippets.

@jerrickhakim

jerrickhakim/CSS

Last active March 17, 2020 13:03
Show Gist options
  • Save jerrickhakim/1cacc370cd7274f3707009d2f9a4c504 to your computer and use it in GitHub Desktop.
Save jerrickhakim/1cacc370cd7274f3707009d2f9a4c504 to your computer and use it in GitHub Desktop.
Download ZIP
Flatsome Fancy Icon Nav
Raw
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 */
Raw
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]
Raw
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]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment