button - How to use images instead of text labels -


how use images instead of text labels? need menu slide down when .logo (bird) image button clicked

how can link text label logo image on menu bar?

ps: menu slides down when .logo (bird) clicked there 2 birds, need menu slide down when bird image sitting on menu clicked, , yes need 1 bird image

/* ------------------------------------------ */  /* basic setup */  /* ------------------------------------------ */    * {    margin: 0;    padding: 0;    box-sizing: border-box;  }    .page-wrap {      width: 1216px;      margin: 0 auto;  }    .row-basic {      max-width: 1216px;  }    html,  body {      text-align:justify      color: #fff;      font-size: 19px;      text-rendering: optimizelegibility;      background: #333;      background-position: center;      height: 100vh;      background-attachment: fixed;  }    /* ------------------------------------------ */  /* header */  /* ------------------------------------------ */    header {      background-color: rgba(246, 149, 149, 0.06);      height: 81px;      width: auto;      padding-top: 24px;      margin-top: 26px;      margin-bottom: 0px;      display:flex;      justify-content: space-between;  }    /* ----- navigation -----*/    nav {      display:flex;      align-items: center;  }    nav ul {      display:flex;  }    .user-tools {      display:flex;      align-items: center;  }    .user-tools :focus {      outline:none;  }    /* ----- logo -----*/    .logo {      position: relative;      cursor: pointer;      height: 68px;      width: auto;      margin-right: 21px;      margin-left: 31px;      z-index: 1;  }    /* ----- menu button -----*/    .mobile-nav-toggle {      height: 50px;      width: 35px;      margin-right: 31px;      display: flex;      align-items: center;      cursor: pointer;  }    .mobile-nav-toggle span,  .mobile-nav-toggle span::before,  .mobile-nav-toggle span::after {      border-radius: 2px;      content: "";      display: block;      height: 6px;      width: 100%;      background: #fff;      position: relative;  }    .mobile-nav-toggle span::before {      top: 11px;  }    .mobile-nav-toggle span::after {      bottom: 17px;  }    /* ------------------------------------------ */  /* page content top bar */  /* ------------------------------------------ */        .box1 {      height: 26px;      width: 300px;      background: #8242b1;  }            .box2 {      height: 26px;      width: 300px;      background: #b14242;  }             .box3 {      height: 26px;      width: 300px;      background: #424bb1;  }          .page-content {      display:flex;      justify-content: center;      transition: 0.3s ease-in-out 0s;      position:relative;      margin-top: -260px;      z-index: 0; }        .toggle {      transition: 0.3s ease-in-out 0s;      text-decoration: none;      font-size: 30px;      color: #eaeaea;      position:relative;      top: -225px;      left: 20px;      z-index: 1; }      .toggle:hover  {          color:#cccccc; }    .topbar {      display:flex;      justify-content: center;      align-items: center;      transition: 0.3s ease-in-out 0s;      position: relative;      top: -220px;      bottom: 0px;      left: 0px;      height: 220px;      width: auto;      padding: 30px;      background: #333;      z-index: 1; }      .topbar li {          display:flex;          justify-content: center;          list-style: none;          color: rgba(255, 255, 255,0.8);          font-size: 16px;          margin-bottom: 16px;          cursor: pointer; }          .topbar li:hover {              color: rgba(255, 255, 255,1); }    #topbartoggler {    display: none; }    #topbartoggler:checked + .page-wrap .topbar {      top: -4px; }    #topbartoggler:checked + .page-wrap .toggle {      top: -5px; }    #topbartoggler:checked + .page-wrap .page-content {      padding-top: 220px; }
<body>      <input type="checkbox" id="topbartoggler" name="" value="">            <div class="page-wrap">             <div class="topbar">          <ul>              <li>home</li>              <li>projects</li>              <li>clients</li>              <li>blog</li>              <li>contact</li>          </ul>      </div>            <label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>            <div class="page-content">          <div class="box1"></div>                      <div class="box2"></div>                      <div class="box3"></div>                  </div>            <header class="row-basic">          <nav>              <img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">          </nav>          <div class="user-tools">              <div class="toggle"></div>              <div class="mobile-nav-toggle">                  <span></span>              </div>          </div>      </header>      </div>        </body>

ok have found out needed replace

<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">

with

<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>

jsfiddle https://jsfiddle.net/heumnzle/4/

* {    margin: 0;    padding: 0;    box-sizing: border-box;  }    .page-wrap {      width: 1216px;      margin: 0 auto;  }    .row-basic {      max-width: 1216px;  }    html,  body {      text-align:justify      color: #fff;      font-size: 19px;      text-rendering: optimizelegibility;      background: #333;      background-position: center;      height: 100vh;      background-attachment: fixed;  }    header {      background-color: rgba(246, 149, 149, 0.06);      height: 81px;      width: auto;      padding-top: 24px;      margin-top: 26px;      margin-bottom: 0px;      display:flex;      justify-content: space-between;  }    nav {      display:flex;      align-items: center;  }    nav ul {      display:flex;  }    .user-tools {      display:flex;      align-items: center;  }    .user-tools :focus {      outline:none;  }    .logo {      position: relative;      cursor: pointer;      height: 68px;      width: auto;      margin-right: 21px;      margin-left: 31px;      z-index: 1;  }    .mobile-nav-toggle {      height: 50px;      width: 35px;      margin-right: 31px;      display: flex;      align-items: center;      cursor: pointer;  }    .mobile-nav-toggle span,  .mobile-nav-toggle span::before,  .mobile-nav-toggle span::after {      border-radius: 2px;      content: "";      display: block;      height: 6px;      width: 100%;      background: #fff;      position: relative;  }    .mobile-nav-toggle span::before {      top: 11px;  }    .mobile-nav-toggle span::after {      bottom: 17px;  }           .box1 {      height: 26px;      width: 300px;      background: #8242b1;  }            .box2 {      height: 26px;      width: 300px;      background: #b14242;  }             .box3 {      height: 26px;      width: 300px;      background: #424bb1;  }          .page-content {      display:flex;      justify-content: center;      transition: 0.3s ease-in-out 0s;      position:relative;      margin-top: -260px;      z-index: 0; }        .toggle {      transition: 0.3s ease-in-out 0s;      text-decoration: none;      font-size: 30px;      color: #eaeaea;      position:relative;      top: -225px;      left: 20px;      z-index: 1; }      .toggle:hover  {          color:#cccccc; }    .topbar {      display:flex;      justify-content: center;      align-items: center;      transition: 0.3s ease-in-out 0s;      position: relative;      top: -220px;      bottom: 0px;      left: 0px;      height: 220px;      width: auto;      padding: 30px;      background: #333;      z-index: 1; }      .topbar li {          display:flex;          justify-content: center;          list-style: none;          color: rgba(255, 255, 255,0.8);          font-size: 16px;          margin-bottom: 16px;          cursor: pointer; }          .topbar li:hover {              color: rgba(255, 255, 255,1); }    #topbartoggler {    display: none; }    #topbartoggler:checked + .page-wrap .topbar {      top: -4px; }    #topbartoggler:checked + .page-wrap .toggle {      top: -5px; }    #topbartoggler:checked + .page-wrap .page-content {      padding-top: 220px; }
<body>      <input type="checkbox" id="topbartoggler" name="" value="">            <div class="page-wrap">             <div class="topbar">          <ul>              <li>home</li>              <li>projects</li>              <li>clients</li>              <li>blog</li>              <li>contact</li>          </ul>      </div>            <label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>            <div class="page-content">          <div class="box1"></div>                      <div class="box2"></div>                      <div class="box3"></div>                  </div>            <header class="row-basic">          <nav>              <img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">          </nav>          <div class="user-tools">              <div class="toggle"></div>              <div class="mobile-nav-toggle">                  <span></span>              </div>          </div>      </header>      </div>        </body>


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more