side-nav

with an image background

HTML

<!--### col-to-row ###-->
<div class="col-to-row flex">
<!--### lg-col-12 ###-->
<div class="lg-col-12">

<!--### hero ###-->
<div class="hero">

<!--### logo-&-menu ###-->
<div class="flex justify-between">
<!--### logo ###-->
<a class="mt1 ml1 " href=" link ">
<img src=" https://via.placeholder.com/150x50/FF0000/FFFFFF?text=LOGO " width= 150 height= 50 alt="logo"/>
</a><!--logo-->
<!--### menu ###-->
<a class="text-decoration-none" href="#menu">
<span class="lg-hide bg-white px2 py1 h2 black">&#9776;</span>
</a><!--menu-->
</div><!--logo-&-menu-->

<h1 class="lg-h00 caps mt4 regular white shadow-text py2 center">side-nav</h1>
<h3 class="lg-h2 py1 regular white shadow-text center">with an image background</h3>
<div class="center mb4 py4">
<a class="h3 regular btn btn-big btn-primary mb4" href="#">Pour Dram</a>
</div>
</div><!-- hero -->


add more content


</div><!-- lg-col-12 -->

<!--### nav ###-->
<div class="px2 bg-darken-1">
          <div id="menu" class="flex items-center flex-column nowrap">
          <a class="btn py2" href="#">navbar-link</a>
          <a class="btn py2" href="#">navbar-link</a>
          <a class="btn py2" href="#">navbar-link</a>
          <a class="btn py2" href="#">navbar-link</a>
          <a class="btn py2" href="#">navbar-link</a>
          <a class="btn py2" href="#">navbar-link</a>
          <a class="btn py2" href="#">navbar-link</a>
          <a class="btn py2" href="#">navbar-link</a>
           </div>
</div><!--nav-->

</div><!-- col-to-row -->

 

The logo is on the left, menu on the right. To reverse, move the logo beneath the menu. Change the margin. From ml1 to mr1

Change the link , the image, the width= 150 and the height= 50


The side-navbar extends to the top. To make it full width, move the first four lines beneath the hero.

...
  </div><!-- hero -->

<!--### col-to-row ###-->
<div class="col-to-row flex">
<!--### lg-col-12 ###-->
<div class="lg-col-12">

add more content

</div><!-- lg-col-12 -->


example → full width-hero   

This works for ALL side-nav hero examples. (top-navs are full width by default)

CSS


/*!================ side-nav ==============*/
.col-to-row {flex-direction: column}
@media (min-width: 64em) {
.col-to-row {flex-direction: row}}
#menu a:hover{background-color: rgba(0, 0, 0, .0625)}
/*!====== hero =======*/
.hero{background-image: url('https://picsum.photos/1000/600?random');}
@media (min-width:64em) {.hero {background-size: cover;background-position:center;
background-attachment:fixed

}}


In this example, the hero background is an image that is stationary. The page bottom "scrolls" over the top third. If you want the background to move with the page, remove:
background-attachment:fixed

Swap your image into the pink field. Be careful to leave the quotes.
It should be about 1000 x 600 px.


JS

none

 

Other Side-nav Heros

 

solid-background

gradient-background

fading-background

full-width-hero