css - Logo won't show up in center of navigation -


i'm trying logo show in center of navigation. i've racked brain , can't figure out why won't.

html 

  <div class ="menu-bar">      <ul id='menu'>    <li><a id="here" href='http://localhost:8888/#landingpage'><span style = "color:#989898">home</span></a></li>      <li><a id="shop" href='http://localhost:8888/68-2/'><span style = "color:#989898">shop</span></a></li> <li><a id="checkout" href='http://localhost:8888/checkout/'><span style = "color:#989898">checkout</span></a></li>  <li><a class="logo" href= 'http://localhost:8888/#landingpage'></a></li>  <li><a id="us" href='http://localhost:8888/about-2'><span style = "color:#989898">about</span></a></li> <li><a id="contact" href='http://localhost:8888/contact-2/'><span style = "color:#989898">contact</span></a></li> <li><a id="press" href='http://localhost:8888/press/'><span style = "color:#989898">press</span></a></li> </ul>   </div> </div> </div>

css

body {     font: 18px "avenir light", 'open sans', sans-serif;      color: #989898;     background-color: #f3f4f4;     font-weight: 100;     width: 100%;     overflow-x: hidden;  }  .container { margin-right:auto; margin-left:auto; padding-left:15px; padding-right:15px  }  p{   font:18px "avenir light"; color: #989898;    }     section {     padding: 100px 0; }   section.success {     color: #fff;     background: #8d4198;     margin-right: -15px;     margin-left: -15px; }  section.white{     color: #989898;     background: #f3f4f4;     margin-right: -15px;     margin-left: -15px;  }  section.orange{      color: #fff;     background: #ef5336;     margin-right: -15px;     margin-left: -15px;  }  /* headings */ /* headings */ /* headings */ /* headings */ /* headings */ /* headings */  h5 {     font-size: 32px;     color: #8d4198;     font-weight: lighter;     text-align:center;   }  h4 {     font-size: 32px;     color: #989898;     font-weight: lighter;     text-align:center;     /*border-bottom: solid 1.5px #ee5435; */     margin-top: -20px;  }    /* header */ /* header */ /* header */ /* header */ /* header */ /* header */ /* header */ /* header */   .header {     background-color:#f3f4f4;     height:150px;     margin: -10px;   }  .header .menu-bar{     padding-top: 80px;   }   .header .menu-bar ul {     margin:0 auto;     width: 950px;;     list-style: none;  }  .header .menu-bar li {   float: left;   border:medium #0f0;   padding-left: 32px;  }   .header ul li a.logo {     background: url("http://i.imgur.com/b5av1zb.png");     background-repeat:no-repeat;     width: 60px;         height: 90px;     margin: 0 auto;     margin-top:-33px;     padding-bottom: 10px;     border-bottom: none; }  .header .menu-bar a:hover  {  color: #8d4198; }  .header .menu-bar aorange:hover  {  color: #8d4198; }  .header .menu-bar ayellow:hover  {  color: #8d4198; }   #here, #us {     padding:0 32px;   text-align:center;   display:block;    color: #93d7e7;   margin: 0 auto;   font-size:17px;   font-weight: 100;   text-decoration: none;    border-bottom: solid 1.5px #93d7e7;   padding-right: 50px;   padding-left: 0px;  }   #shop, #contact {     padding:0 32px;   text-align:center;   display:block;    color: #ee5435;   margin: 0 auto;   font-size:17px;   font-weight: 100;   text-decoration: none;    border-bottom: solid 1.5px #ee5435;   padding-right: 50px;   padding-left: 0px;  }   #checkout, #press {     padding:0 32px;   text-align:center;   display:block;    color: #d3dc3f;   margin: 0 auto;   font-size:17px;   font-weight: 100;   text-decoration: none;    border-bottom: solid 1.5px #d3dc3f;   padding-right: 50px;   padding-left: 0px; }

here's codepen: http://codepen.io/anon/pen/kpwpoo

i need fresh eyes! suggestions? thank you!

you need switch layout context <a> (inline defaut )

body {    font: 18px "avenir light", 'open sans', sans-serif;    color: #989898;    background-color: #f3f4f4;    font-weight: 100;    width: 100%;    overflow-x: hidden;  }    .container {    margin-right: auto;    margin-left: auto;    padding-left: 15px;    padding-right: 15px  }    p {    font: 18px "avenir light";    color: #989898;  }    section {    padding: 100px 0;  }    section.success {    color: #fff;    background: #8d4198;    margin-right: -15px;    margin-left: -15px;  }    section.white {    color: #989898;    background: #f3f4f4;    margin-right: -15px;    margin-left: -15px;  }    section.orange {    color: #fff;    background: #ef5336;    margin-right: -15px;    margin-left: -15px;  }  /* headings */  /* headings */  /* headings */  /* headings */  /* headings */  /* headings */    h5 {    font-size: 32px;    color: #8d4198;    font-weight: lighter;    text-align: center;  }    h4 {    font-size: 32px;    color: #989898;    font-weight: lighter;    text-align: center;    /*border-bottom: solid 1.5px #ee5435; */        margin-top: -20px;  }  /* header */  /* header */  /* header */  /* header */  /* header */  /* header */  /* header */  /* header */    .header {    background-color: #f3f4f4;    height: 150px;    margin: -10px;  }    .header .menu-bar {    padding-top: 80px;  }    .header .menu-bar ul {    margin: 0 auto;    width: 950px;    ;    list-style: none;  }    .header .menu-bar li {    float: left;    border: medium #0f0;    padding-left: 32px;  }    .header ul li a.logo {    background: url("http://i.imgur.com/b5av1zb.png");    background-repeat: no-repeat;    width: 90px;    height: 90px;    margin: 0 auto;    margin-top: -33px;    padding-bottom: 10px;    border-bottom: none;    display: block  }    .header .menu-bar a:hover {    color: #8d4198;  }    .header .menu-bar aorange:hover {    color: #8d4198;  }    .header .menu-bar ayellow:hover {    color: #8d4198;  }    #here,  #us {    padding: 0 32px;    text-align: center;    display: block;    color: #93d7e7;    margin: 0 auto;    font-size: 17px;    font-weight: 100;    text-decoration: none;    border-bottom: solid 1.5px #93d7e7;    padding-right: 50px;    padding-left: 0px;  }    #shop,  #contact {    padding: 0 32px;    text-align: center;    display: block;    color: #ee5435;    margin: 0 auto;    font-size: 17px;    font-weight: 100;    text-decoration: none;    border-bottom: solid 1.5px #ee5435;    padding-right: 50px;    padding-left: 0px;  }    #checkout,  #press {    padding: 0 32px;    text-align: center;    display: block;    color: #d3dc3f;    margin: 0 auto;    font-size: 17px;    font-weight: 100;    text-decoration: none;    border-bottom: solid 1.5px #d3dc3f;    padding-right: 50px;    padding-left: 0px;  }
<div class= "header">      <div class ="menu-bar">          <ul id='menu'>           <li><a id="here" href='http://localhost:8888/#landingpage'><span style = "color:#989898">home</span></a></li>       <li><a id="shop" href='http://localhost:8888/68-2/'><span style = "color:#989898">shop</span></a></li>  <li><a id="checkout" href='http://localhost:8888/checkout/'><span style = "color:#989898">checkout</span></a></li>    <li><a class="logo" href= 'http://localhost:8888/#landingpage'></a></li>    <li><a id="us" href='http://localhost:8888/about-2'><span style = "color:#989898">about</span></a></li>  <li><a id="contact" href='http://localhost:8888/contact-2/'><span style = "color:#989898">contact</span></a></li>  <li><a id="press" href='http://localhost:8888/press/'><span style = "color:#989898">press</span></a></li>  </ul>     </div>  </div>  </div>

display: inline or float work

your pen forked http://codepen.io/gc-nomade/pen/jpenqn (same snippet above)


Comments

Post a Comment

Popular posts from this blog

shopping cart - Page redirect not working PHP -

im trying redirect user when click "empty cart". redirect working "add cart" not "empty cart". ideas great. in main .php file set current url seen $current_url = base64_encode("http://$_server[http_host]$_server[request_uri]"); then below cartaction.php file handles actions such "add cart" , "empty cart" <?php session_start(); include_once 'config.php'; //add item in shopping cart if(isset($_post["add"])) { $product_id = $_post["product_id"]; //product id $return_url = base64_decode($_post["return_url"]); //return url $qty = $_post["qty"]; $product = $mysqli->query("select product_name, unit_price, unit_quantity products product_id = '$product_id'"); $obj = $product->fetch_object(); if(!isset($_session['products'])) { $_session['products'] = array(); } if(array_key_exists($product_id...
Read more

php - How to modify a menu to show sub-menus -

i have custom php menu made person, displays categories menu. however, need display subcategories well. tried adding hierarchical parameter didn't work. hoping assistance! here code: <ul> <?php /* categories wp e-commerce products */ $wpec_product_categories = get_terms( 'wpsc_product_category', 'hide_empty=0&parent=0&exclude=298'); $myarray = array(); foreach($wpec_product_categories $wpec_categories){ $myarray[$wpec_categories->term_id]['name'] = $wpec_categories->name; $myarray[$wpec_categories->term_id]['slug'] = $wpec_categories->slug; $myarray[$wpec_categories->term_id]['term_id'] = $wpec_categories->term_id; } foreach($myarray $wpec_categories1){ $wpec_term_name = $wpec_categories1['name']; $wpec_term_slug = $wpec_categories1['slug']; $wpec_term_id = $wpec_categories1['term_id']; echo '<li> <a href="'.get_page_link(19)....
Read more

python - Installing PyDev in eclipse is failed -

unable read repository @ http://pydev.sf.net/updates/content.xml. sun.security.validator.validatorexception: pkix path building failed: sun.security.provider.certpath.suncertpathbuilderexception: unable find valid certification path requested target i installing pydev in eclipse using python, doesn't install successfully. gives above error. happened? how solve error? i had error when trying install on laptop behind corporate firewall. couldn't tell setup of firewall, not sure of root cause. i got passed error installing pydev eclipse when out behind firewall. another way got around have eclipse on non-firewalled machine, install pydev eclipse, , copy whole eclipse directory non-firewalled machine firewalled machine. there better way, , way fix properly, didn't have time work out firewall doing. this on windows 7 machine (yeah know) not work *nix versions installed through package manager yum or apt.
Read more