Menu icon Foundation
z index for header logo

In header we design a logo and it falls on below orbit slider, the logo has to get z index, please go through link and guide me

http://thedesignfactory.info/beta/jk/

z index

In header we design a logo and it falls on below orbit slider, the logo has to get z index, please go through link and guide me

http://thedesignfactory.info/beta/jk/

Cole Beck almost 5 years ago

Try replacing your top div area with this:

<div style="">
    <div class="row" style="background-color: rgb(248, 151, 36); height: 90px; padding-top: 20px; max-width: none;">
      <div class="large-12 medium-12 small-12 columns">
          <div class="large-2 medium-2 small-12 columns" style="padding-left:0px;">
          <img style="max-height: 50px;" src="img/logo.png">
            </div>
            <div class="large-10 medium-10 small-12 columns">
              <div class="row">
                  <div class="large-12 medium-12 small-12 columns header_contact text-right">
                   <span style="padding-right:30px;">CONTACT US</span>         TOLL FREE: 1800 12345 03
                    </div>
                    <div class="large-12 medium-12 small-12 columns" style="padding-right:0px;">

                   <nav class="top-bar" data-topbar="" role="navigation"> 
                   <ul class="title-area"> <li class="name"></li>
                   <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul>

                     <section class="top-bar-section"> 
                     <ul class="right"> 
                     <li><a href="#">HOME</a></li> 
                     <li><a href="#">DOMESTIC RO</a></li> 
                     <li><a href="#">INDUSTRIAL &amp; COMMERCIAL </a></li> 
                     <li><a href="#"> DISPENSER  </a></li> 
                     <li><a href="#">WATER SOFTNER </a></li> 
                     <li><a href="#">VACCUM CLEANER</a></li> 
                     <li><a href="#">ABOUT US</a></li> 
                      </ul>  
                      </section></nav>


                    </div>
                 </div>   
                </div>
            </div>
        </div>
    </div>

Rafi Benkual almost 5 years ago

You have a row wrapping the image so this is expected behavior.

https://notableapp.com/posts/d1cff189f6016b7cfcde18b5003ca88b126b0254

<div class="large-12 medium-12 small-12 columns">
          <div class="large-2 medium-2 small-12 columns" style="padding-left:0px;">
          <img src="img/logo.png">

What would be better is to use a background image, then absolutely position it.