html - Allow image overflow in "overflow: hidden"-based navigation -

i trying rebuild batman nav left-aligned centered logo image. added additional li class:

            <li><a href="#">link 1</a></li>             <li><a href="#">link 2</a></li>             <li class="logo_nav"><a href="/"><img src="image-url" /></a></li>             <li><a href="#">link 3</a></li>             <li><a href="#">link 4</a></li> 

and second logo class align logo on left if screen size decreases:

            <div class="logo_left"><a href="/"><img src="image-url" /></a></div> 

my problem: overflow: hidden; in main class not allow overflow on centered image. when delete overflow: hidden; main class , add exceptions nav classes, whole design explodes on smaller screens.

does have idea on approach or knows better way result need?

see pen here: http://codepen.io/akoba/pen/qqezdx

// sticky header  $(window).scroll(function() {      if ($(window).scrolltop() > 100) {      $('.main').addclass('sticky');    } else {      $('.main').removeclass('sticky');    }  });    // mobile navigation  $('.mobile-toggle').click(function() {    if ($('.main').hasclass('open-nav')) {      $('.main').removeclass('open-nav');    } else {      $('.main').addclass('open-nav');    }  });    $('.main li a').click(function() {    if ($('.main').hasclass('open-nav')) {      $('.navigation').removeclass('open-nav');      $('.main').removeclass('open-nav');    }  });    // navigation scroll - ljepo radi materem  $('nav a').click(function(event) {    var id = $(this).attr("href");    var offset = 70;    var target = $(id).offset().top - offset;    $('html, body').animate({      scrolltop: target    }, 500);    event.preventdefault();  });

.main {    position: fixed;    max-height: 85px;    z-index: 999;    width: 100%;    padding-top: 17px;    background: none;    -webkit-transition: 0.3s;    transition: 0.3s;    opacity: 0;    top: -100px;    padding-bottom: 6px;    overflow: hidden;  }  @media screen , (max-width: 766px) {    .main {      padding-top: 25px;    }  }  .open-nav {    max-height: 400px !important;  }  .open-nav .mobile-toggle {    -webkit-transform: rotate(-90deg);    transform: rotate(-90deg);  }  .sticky {    background-color: rgba(255, 255, 255, 0.93);    opacity: 1;    top: 0;    border-bottom: 1px solid gainsboro;  }  .logo_left img {    max-width: 100px;    vertical-align: middle;    overflow: visible;    margin-left: 20px;    display: none;    float: left;  }  .logo_nav img {    max-width: 130px;    vertical-align: top;    overflow: visible !important;    margin-top: -10px;  }  @media screen , (max-width: 766px) {    .logo_left img {      display: block;      overflow: visible;    }    .logo_nav {      display: none;    }  }  nav {    width: 100%;  }  @media screen , (max-width: 766px) {    nav {      width: 100%;    }  }  nav ul {    list-style: none;    text-align: center;  }  @media screen , (max-width: 766px) {    nav ul {      padding-top: 10px;      margin-bottom: 22px;      float: left;      text-align: center;      width: 100%;    }  }  nav ul li {    display: inline-block;    margin-left: 35px;    margin-top: 10px;    line-height: 1.5;  }  @media screen , (max-width: 766px) {    nav ul li {      width: 100%;      padding: 7px 0;      margin: 0;    }  }  nav ul {    font-size: 12px;  }  .mobile-toggle {    display: none;    cursor: pointer;    font-size: 20px;    right: 22px;    position: absolute;    top: -10px;    width: 30px;    -webkit-transition: 200ms ease-in;    -moz-transition: 200ms ease-in;    transition: 200ms ease-in;  }  @media screen , (max-width: 766px) {    .mobile-toggle {      display: block;    }  }  .mobile-toggle span {    width: 30px;    height: 4px;    margin-bottom: 6px;    border-radius: 1000px;    display: block;  }  .row {    width: 100%;    max-width: 940px;    margin: 0 auto;    position: relative;    padding: 0 2%;  }  @-webkit-keyframes scroll {    0% {      opacity: 1;      -webkit-transform: translatey(0);      transform: translatey(0);    }    100% {      opacity: 0;      -webkit-transform: translatey(20px);      transform: translatey(20px);    }  }  * {    box-sizing: border-box;  }  @keyframes scroll {    0% {      opacity: 1;      -webkit-transform: translatey(0);      -ms-transform: translatey(0);      transform: translatey(0);    }    100% {      opacity: 0;      -webkit-transform: translatey(20px);      -ms-transform: translatey(20px);      transform: translatey(20px);    }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  <header class="main">    <div class="logo_left">      <a href="/">        <img src="https://c.marketingtechblog.com/wp-content/uploads/2010/06/example-logo-660x330.png" />      </a>    </div>    <div class="row">      <div class="mobile-toggle">        <span></span>        <span></span>        <span></span>      </div>        <nav>        <ul>          <li><a href="#">link 1</a>          </li>          <li><a href="#">link 2</a>          </li>          <li class="logo_nav">            <a href="/">              <img src="https://c.marketingtechblog.com/wp-content/uploads/2010/06/example-logo-660x330.png" />            </a>          </li>          <li><a href="#">link 3</a>          </li>          <li><a href="#">link 4</a>          </li>        </ul>      </nav>    </div>  </header>  <div>    lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata    sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum.    stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos    et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.    <br />    <br />duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis @ vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait    nulla facilisi. lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.    <br />    <br />ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla    facilisis @ vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.    <br />    <br />nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam    erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.    <br />    <br />duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.    <br />    <br />at vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et    dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing elitr, @ accusam    aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est lorem ipsum dolor sit amet. lorem ipsum dolor sit    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.    <br />    <br />consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum    dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren,    no sea takimata sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores    et ea rebum. stet clita kasd gubergren, no sea takimata sanctus.    <br />    <br />lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata    sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum.    stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos    et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.    <br />    <br />duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis @ vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait    nulla facilisi. lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl    ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis @ vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril    delenit augue duis dolore te feugait nulla facilisi.    <br />    <br />nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam    erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.  </div>

instead of having overflow: hidden on .main, add media query.

.main {   position: fixed;   max-height: 85px;   z-index: 999;   width: 100%;   padding-top: 17px;   background: none;   -webkit-transition: 0.3s;   transition: 0.3s;   opacity: 0;   top: -100px;   padding-bottom: 6px;   overflow: hidden; /*remove here*/ }  @media screen , (max-width: 766px) {   .main {     padding-top: 25px;     overflow: hidden; /*add here*/   } }