Top-nav

with an image background

HTML


<!--### flex column ###-->
<div class="flex flex-column">
<!--### hero ###-->
<div class="hero order-1">

<!--### 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">Top-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" href="#">Pour Dram</a></div>
</div><!--hero -->


<!--### order-3 ###-->
<div class="order-3">
HELLO!!
This is where you put the CONTENT!

   </div><!-- order-3 -->



  <!--### another order-3 ###-->
   <div class="order-3">
You can put some more content HERE!
   </div><!-- another order-3 -->



    <!--### nav ###-->
    <div class="nav-items flex justify-center bg-silver center" id="menu">
       <a class="px2 btn py2" href="#">nav-item</a>
       <a class="px2 btn py2" href="#">nav-item</a>
       <a class="px2 btn py2" href="#">nav-item</a>
       <a class="px2 btn py2" href="#">nav-item</a>
       <a class="px2 btn py2" href="#">nav-item</a>
    </div><!-- nav -->
</div><!-- flex column -->

 

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

 

CSS

.nav-items{flex-direction:column;order:9}
.nav-items a:hover{background-color: rgba(0, 0, 0, .0625)}
@media (min-width: 64em) {
.nav-items{flex-direction:row;  order:  0   }}
/*!====== basic-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
} }

 

order: 0 , puts the menu bar above the hero.  order: 2   puts it beneath.   

 

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

JS

none

 

Other top-nav Heros

 

Fading image

Solid color

Gradient