seo Question posted in
Some basic information to get you started with this can be found here.

Why the three line menu navicon won't display? – SEO

Please take a look on the following code and tell me if it has an error. It won’t display the image of the navicon even when I remove the “hidden” from the #menu-icon. Sorry for posting the whole but I just want to make sure that I didn’t write something that I shouldn’t.

@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';

*{
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    background-color: #F5F5F5;
    color: #67727A;
    font-family: 'Alegreya', sans-serif;
    margin: 0;
}
h2 {
    font-size: 250%;
    font-weight: 700;
    text-align: center;
    padding-top: 2%;
    color: #F5F5F5;
}
h3 {
    font-size: 175%;
    line-height: 155%;
    padding: 5% 0;
    font-weight: 400;
    color: #F5F5F5;
}
p {
    font-family: 'Alegreya sans', sans-serif;
    color: #F5F5F5;
    font-size: 160%;
    line-height: 150%;
    padding: 3%;
    text-indent: 2%;
    text-align: justify;
}
img {
    max-width: 100%;
    height: auto;
    width: auto;
    margin: -4px;
}
header {
    background-color: #6991AC;
    width: 100%;
    height: 86px;
}
#header-inner {
    max-width: 1200px;
    margin: 0 auto;
}
#logo {
    margin: 20px;
    float: left;
    width: 200px;
    height: 60px;
    background: url(img/RD.png) no-repeat center;
}
/*-- Start Navigation --*/
nav {
    float: right;
    padding: 25px 20px 0 0;
}
#menu-icon {
    display: hidden;
    width: 40px;
    weight: 40px;
    background: url(img/nav.png) center;
}
a:hover#menu-icon {
    border-radius: 4px 4px 0 0;
}
ul {
    list-style-type: none;
}
nav ul li {
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 150%;
    display: inline-block;
    float: left;
    padding: 10px;
}
nav ul li a {
    color: #f5f5f5;
    text-decoration: none;
}
nav ul li a:hover {
    color: #C3D7DF;
}
.current {
    color:#C3D7DF;
}
/*-- End Navigation --*/
.banner {
    width: 100%;
    background-color: #6991AC;
}
.banner-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.one-fourth {
    width: 25%;
    float: left;
    text-align: center;
}
#html {
    background-color: #F1AA90;
}
#css{
    background-color: #BEB9AD;
}
#seo {
    background-color: #AADCD2;
}
#social {
    background-color: #A2B2C1;
}
.one-fourth i {
    color: #F0F0F0;
    font-size: 500%;
    padding: 13% 0 4% 0;
}
.inner-wrapper {
    float: left;
    width: 100%;
    background-color: #C3D7DF;
}
article {
    float: left;
    margin: 0 auto;
    width: 50%;
    height: auto;
}
#tablet {
    background-color: #C3D7DF;
}
aside {
    float: right;
    margin: 0 auto;
    width: 50%;
    height: auto;
}
#tablet2 {
    background-color: #A2B1C1;
}
#mobile {
    background-color: #BEB9AD;
}
#desktop {
    background-color: #F1AA90;
}
.inner-wrapper-2 {
    float: left;
    width: 100%;
    background-color: #C3D7DF;
}
.inner-wrapper-3 {
    float: left;
    width: 100%;
    background-color: #AADCD2;
}
.one-third {
    width: 33.333333%;
    float: left;
    text-align: center;
}
#google {
    background-color: #A2B1C1;
}
#marketing {
    background-color: #BEB9AD;
}
#customers {
    background-color: #AADCD2;
}
#smiley {
    background-color: #AADCD2;
    padding: 0 0 1%;
    clear: both;
}
/*-- Start Footer ---*/
footer {
    background-color: #6991AC;
    width: 100%;
}
.social {
    list-style-type: none;
    text-align: center;
}
.social li {
    display: inline;
}
.social i {
    font-size: 460%;
    margin: 1%;
    padding: 5% 5% 5% 4%;
    color: #C3D7DF;
}
.social i:hover {
    color: #F5F5F5;
}
footer.second {
    border-top: 1px solid #AADCD2;
    background-color: #544B59;
    max-height: 55px;
    text-align: center;
    margin: 0;
}
footer.second p {
    padding: 5px 0 9px 0;
    text-align: center;
}
/*====== MEDIA ========*/
@media screen and (max-width: 760px) {
    h2 {
        font-size: 150%;
    }
    h3 {
        font-size: 125%;
    }
    p {
        font-size: 120%;
    }
    header {
        position: absolute;
    }
    #logo {
        margine: 15px 0 20px -25px;
        background: url(img/RD_mobile.png) no-repeat center;
    }
    #menu-icon {
        display: inline-block;
    }
    nav ul, nav:active ul {
        display: none;
        z-index: 1000;
        position: absolute;
        padding: 20px;
        background: #6991AC;
        right: 20px;
        top: 60px;
        border: 1px solid #FFF;
        border-radius: 2px 0 2px 2px;
        width: 50%;
    }
    nav:hover ul {
        display: block;
    }
    nav li {
        text-align: center;
        width: 100%;
        padding: 10px 0;
    }
    .banner {
        padding-top: 86px;
    }
    .one-fourth {
        float: left;
        width: 100%;
    }
    .one-fourth i {
        font-size: 350%;
        padding: 4% 0 1% 0;
    }
    article {
        width: 100%;
    }
    aside {
        width: 100%;
    }
    .hand-mobile {
        display: none;
    }
    .one-third {
        width: 100%;
    }
    .social i {
        font-size: 180%;
    }
}
    <!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Rocket Design - Mobile Web Design Services</title>
    <link rel="stylesheet" type="text/css" href="style.css" />  
    <link href="css/font-awesome.min.css" rel="stylesheet"/>
    <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
</head>
<body>
<header>
    <div id="header-inner">
        <a href="index.html" id="logo"></a>
        <nav>
            <a href="#" id="menu-icon"></a>
            <ul>
                <li><a href="index.html" class="current">Home</a></li>
                <li><a href="#">Skills</a></li>
                <li><a href="#">Portofolio</a></li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>
<!--End Header-->
<section class="banner">
    <div class="banner-inner">
        <img src="img/rocket_design.png">
    </div>
</section>
<!--End Banner-->
<section class="one-fourth" id="html">
    <td><i class="fa fa-html5"></i></td>
    <h3>HTML</h3>
</section>
<section class="one-fourth" id="css">
    <td><i class="fa fa-css3"></i></td>
    <h3>CSS</h3>
</section>
<section class="one-fourth" id="seo">
    <td><i class="fa fa-search"></i></td>
    <h3>SEO</h3>
</section>
<section class="one-fourth" id="social">
    <td><i class="fa fa-users"></i></td>
    <h3>SOCIAL</h3>
</section>
<!--End Four Column Section-->
<section class="inner-wrapper">
    <article id="tablet">
        <img src="img/hand_ipad.png">
    </article>
    <aside id="tablet2">
        <h2>MOBILE. TABLET. DESKTOP.</h2>
        <p>A tablet computer, commonly shortened to tablet, is a thin, flat mobile computer with a touchscreen display, which is usually in color, processing circuitry, and a rechargeable battery in a single device. Tablets often come equipped with sensors, including digital cameras, a microphone, and an accelerometer, so that images on screens are always displayed upright.</p>
    </aside>
</section>
<section class="inner-wrapper-2">
    <article id="mobile">
        <h2>ACROSS EACH DEVICE</h2>
        <p>A tablet computer, commonly shortened to tablet, is a thin, flat mobile computer with a touchscreen display, which is usually in color, processing circuitry, and a rechargeable battery in a single device. Tablets often come equipped with sensors, including digital cameras, a microphone, and an accelerometer, so that images on screens are always displayed upright.</p>
    </article>
    <aside class="hand-mobile">
        <img src="img/hand_mobile.png">
    </aside>
</section>
<section class="inner-wrapper">
    <article>
        <img src="img/desktop.png">
    </article>
    <aside id="desktop">
        <p>A tablet computer, commonly shortened to tablet, is a thin, flat mobile computer with a touchscreen display, which is usually in color, processing circuitry, and a rechargeable battery in a single device. Tablets often come equipped with sensors, including digital cameras, a microphone, and an accelerometer, so that images on screens are always displayed upright.</p>
    </aside>
</section>
<!--End Main Two Column Section-->
<section class="inner-wrapper-3">
    <section class="one-third" id="google">
        <h3>GOOGLE SEARCH</h3>
        <p>A tablet computer, commonly shortened to tablet, is a thin, flat mobile computer with a touchscreen display, which is usually in color, processing circuitry, and a rechargeable battery in a single device.</p>
    </section>
    <section class="one-third" id="marketing">
        <h3>MARKETING</h3>
        <p>A tablet computer, commonly shortened to tablet, is a thin, flat mobile computer with a touchscreen display, which is usually in color, processing circuitry, and a rechargeable battery in a single device.</p>
    </section>
    <section class="one-third" id="customers">
        <h3>HAPPY CUSTOMOERS</h3>
        <p>A tablet computer, commonly shortened to tablet, is a thin, flat mobile computer with a touchscreen display, which is usually in color, processing circuitry, and a rechargeable battery in a single device.</p>
    </section>
</section>
<!--End Three Column Section-->
<section id="smiley">
    <h2>: )</h2>
</section>
<!--End Smiley Face-->
<footer>
    <ul class="social">
        <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
        <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
        <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
    </ul>
</footer>
<!--End Footer-->
<footer class="second">
    <p>&copy; Rocket Design</p>
</footer>
<!--End Second Footer-->
</body>
</html>
Tags:

4

Answers


  1. 0

    First thing is that display: hidden doesn’t exist.

    Without a working code sample or link to a website I can only guess what you want to achieve but maybe this will work:

    #menu-icon:hover {
    border-radius: 4px 4px 0 0;
}
    Login or Signup to reply.
  2. 0

    There are a couple of issues here.

    Your menu icon is an anchor tag. As the anchor tag is empty, there is nothing to render by default. You need to set a width and height so that there is an area for the background to render for.

    In your css, you have set ‘weight’ instead of ‘height’.

    Also you will need to use display:none instead of display:hidden

    The changed css looks like:

    #menu-icon {
    display:none;
    height: 60px;
    width: 60px;
}

    codepen

    Login or Signup to reply.
  3. 0

    A simple mistake in your css. Instead of weight: 40px; it must be height: 40px

    #menu-icon {
    display: hidden;
    width: 40px;
    height: 40px;
    background: url(img/nav.png) center;
}
    Login or Signup to reply.
  4. 0

    You don’t need background-image to create a menu. Make your <nav> a flex container & modify your #menu-icon into three <div>‘s. Have a look at the updated Codepen.

    <a href="#" class="ham-menu"></a>
<a href="#" class="ham-menu"></a>
<a href="#" class="ham-menu"></a>

    And give them CSS rules (in SASS):

    nav {
  display: flex;
  flex-direction: column;

  &:hover {
    border-radius: 0;
    cursor: pointer;
  }

  .ham-menu {
    height: 5px;
    margin-top: 5px;
    background: #fff !important;

    @media screen and (min-width: 760px) {
      display: none;
    }

    &:hover {
      border-radius: 0 !important;
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search