0

I created a responsive navigation bar, but when it is in mobile view, the headings on the menu are hiding the menu icon when they are shown. Below is a picture of what is happening (I don' have enough reputation to post pictures yet, so there are links), and a code pen. I have tried adding padding and adjusting the float property, but nothing works. Thank you!

Code pen: http://codepen.io/caguilera0001/pen/yarwRO

After Menu Icon is Clicked:

HTML:

<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a>

<ul class="clearfix">
<li><a href="index.html">Home</a></li>

<li><a href=""><span>About Us</span></a>
    <ul>
    <li><a href="principal's_message.html">Principal's Message</a></li> 
    <li><a href= "mission_and_vision.html">Mission and Vision</a></li> 
    <li><a href= "our_history.html">Our History</a></li> 
    <li><a href= "staff_directory.html">Staff Directory</a></li> 
    <li><a href= "links.html">Links</a></li> 
    <li><a href= "photo_gallery.html">Photo Gallery</a></li> 
    </ul>
    </li>

<li> <a href=""><span>School Offices</span></a>
    <ul>
    <li><a href="attendance_office.html">Attendance</a></li> 
    <li><a href= "counseling_office.html">Counseling</a></li> 
    <li><a href= "main_office.html">Main</a></li> 
    <li><a href= "magnet_office.html">Magnet</a></li> 
    <li><a href= "bridge_office.html">Bridge</a></li> 
    <li><a href= "english_learner's_office.html">EL</a></li>
    <li><a href= "itd_office.html">ITD</a></li> 
    <li><a href= "library.html">Library</a></li> 
    <li><a href= "parent_center.html">Parent Center</a></li>
    <li><a href= "nurse's_office.html">Nurse</a></li> 
    <li><a href= "safety_ofifice.html">Safety</a></li> 
    <li><a href= "plant_manager's_office.html">Plant Manager</a></li> 
    <li><a href= "cafeteria.html">Cafeteria</a></li> 
    <li><a href= "student_store.html">Student Store</a></li> 
      </ul>
      </li>

<li> <a href=""><span>Academics</span></a>
    <ul>
   <li><a href= "classes_homework.html">Classes/Homework</a></li> 
    <li><a href= "culmination_requirements.html">Culmination</a></li> 
    <li><a href= "departments.html">Departments</a></li> 
    <li><a href= "counseling_office.html">Counseling</a></li> 
    <li><a href= "library.html">Library</a></li> 
    </ul> 
</li>

<li> <a href=""><span>Programs</span></a>
    <ul>
    <li><a href= "http://www.bancroftib.weebly.com" target="new">IB</a></li> 
    <li><a href= "middle_years_programme.html">The Middle Years</a></li> 
    <li><a href= "ste[+a]m_program.html">STE[+a]M</a></li> 
    <li><a href= "performing_arts_program.html">Performing Arts</a></li> 
    <li><a href= "vei-jv.html">VEI-JV</a></li> 
    <li><a href= "gate_sas_program.html">GATE/SAS</a></li> 
    <li><a href= "http://lacerstars.org/" target="new">LACER</a></li> 
    </ul>
</li>

<li> <a href=""><span>Students</span></a>
    <ul>
    <li><a href= "cougar_news.html">Cougar News</a></li>
    <li><a href= "bell_schedule.html">Bell Schedule</a></li> 
    <li><a href= "classes_homework.html">Classes/Homework</a></li> 
    <li><a href= "dress_code.html">Dress Code</a></li> 
    <li><a href= "cougar_code.html">Cougar Code</a></li> 
    <li><a href= "attendance_policy.html">Attendance Policy</a></li> 
    <li><a href= "culmination_requirements.html">Culmination</a></li> 
    <li><a href= "http://www.bancroftib.weebly.com/learner-profile.html" target="new">IB Learner Profile</a></li> 
    <li><a href= "http://achieve.lausd.net/cms/lib08/CA01000043/Centricity/Domain/317/24359_OSO_PrntStdntHndbk1516_eng.pdf" target="new">Student Handbook</a></li> 
    <li><a href= "library.html">Library</a></li> 
    <li><a href= "map.html">Map</a></li> 
    <li><a href= "http://achieve.lausd.net/site/default.aspx?PageType=3&ModuleInstanceID=1555&ViewID=7B97F7ED-8E5E-4120-848F-A8B4987D588F&RenderLoc=0&FlexDataID=16590&PageID=845" target="new">Food Menu</a></li> 
    <li><a href= "student_store.html">Student Store</a></li> 
    <li><a href= "http://www.bancroftmiddleschool.org/2015-16yearbook/index.html" target="new">Yearbook</a></li> 
    </ul>
</li>

<li> <a href=""><span>Parents</span></a>
    <ul>
    <li><a href= "parent_bulletin.html">Parent Bulletin</a></li>
    <li><a href= "cougar_news.html">Cougar News</a></li>
    <li><a href= "parent_center.html">Parent Center</a></li>
    <li><a href= "calendar.html">Calendar</a></li> 
    <li><a href= "bell_schedule.html">Bell Schedule</a></li> 
    <li><a href= "classes_homework.html">Classes/Homework</a></li> 
    <li><a href= "culmination_requirements.html">Culmination</a></li> 
    <li><a href= "http://achieve.lausd.net/cms/lib08/CA01000043/Centricity/Domain/317/24359_OSO_PrntStdntHndbk1516_eng.pdf" target="new">District Handbook</a></li>
    <li><a href= "school_site_council.html">SSC Council</a></li> 
    <li><a href= "school_decision_making_council.html">SDM Council</a></li> 
    <li><a href= "elac.html">ELAC</a></li> 
    <li><a href= "contact_teachers.html">Contact Teachers</a></li> 
    </ul>
</li>

<li><a href="contact.php">Contact Us</a></li>

  </ul>
</nav>

CSS:

#nav {
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    width: 100%;
    position: absolute;
    z-index: 2;
    padding-left: 10%;
    padding-right: 10%;
    box-sizing:border-box;  /** add this **/
 -moz-box-sizing:border-box; /** add this **/
 -webkit-box-sizing:border-box; /** add this **/
 -ms-box-sizing:border-box; /** add this **/
   background-color: #4484CE;
}
#nav > a {
    display: none;
}
#nav li {
    position: relative;
}
#nav li a {
    color: #fff;
    display: block;
}

/* first level */

    #nav > ul {
    height: 30px; /* 60 */
    background-color: #93C178;
    list-style: none;
    padding: 0;
}
#nav > ul > li {
    width: 12.5%;
    height: 30px;
    float: left;
}
#nav > ul > li > a {
    height: 30px;
    font-size: 14px;
    line-height: 2.5em; /* 60 (24) */
    text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-decoration: none;
    display:block ;
    color: #FFF; 
    border: 1px solid #4484CE;
    text-shadow: 1px 1px 1px #000; 
}

#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {
    background-color: #F9CF00;
}
/* second level */

    #nav li ul {
    background-color: #93C178;
    display: none;
    position: absolute;
    top: 100%;
    list-style: none;
                  padding: 0;
}
#nav li:hover ul {
    display: block;
    left: 0;
    right: 0;
}
#nav li:not( :first-child ):hover ul {
    left: -1px;
}
#nav li ul a {
    font-size: 14px; /* 20 */
    text-align: center;
    border-top: 1px solid #4484CE;
    padding: 0.75em; /* 15 (20) */
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-decoration: none;
    display:block ;
    color: #FFF; 
    border: 1px solid #4484CE;
    text-shadow: 1px 1px 1px #000; 
    font-size: 14px;
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
    background:#FCFCFC;
    color: #465C8B;
}

@media only screen and ( max-width: 62.5em ) /* 1000 */ {
#nav {
    width: 100%;
    margin: 0;
    z-index: 2;
}
}

 @media only screen and ( max-width: 40em ) /* 640 */ {
html {
    font-size: 75%; /* 12 */
}

#titleBar{
    padding-top: 20px;  
}

#nav {
    top: auto;
    left: auto;
    padding: 0;
    background-color: none;
    z-index: 2;
    width: 100%;
    position: absolute;
    top: 0; 
    background-color: #4484CE;
    height: 5.5%;
}
#nav > a {
    width: 5.125em; /* 50 */
    height: 5.125em; /* 50 */
    text-align: left;
    text-indent: -9999px;
    background-color: #93C178;
    position: relative;
    float: right;
}
#nav > a:before, #nav > a:after {
    position: absolute;
    border: 2px solid #fff;
    top: 35%;
    left: 25%;
    right: 25%;
    content: '';
}
#nav > a:after {
    top: 60%;
}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {
    display: block;
}
/* first level */

    #nav > ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
}
#nav:target > ul {
    display: block;
}
#nav > ul > li {
    width: 100%;
    float: none;
    height: auto;
}
#nav > ul > li > a {
    height: auto;
    text-align: left;
    padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a {
    border-right: none;
    border-bottom: 1px solid #4484CE;
}
/* second level */

                #nav li ul {
    position: static;
    padding: 1.25em; /* 20 */
    padding-top: 0;
}

#header{
    display: none;  
    background-color: #4484CE;
    height: 100%;
}

marquee {
    display: none;  
    background-color: #4484CE;
    height: 100%;
}

}

@media only screen and ( max-width: 1350px ) {
     #nav {
        font-size: 12px;    
    }

    #nav > ul > li > a {
        font-size: 12px;    
    }

    #nav li ul a {
        font-size: 12px;    
    }
}

@media only screen and ( max-width: 1180px ) {
     #nav {
        font-size: 10px;    
    }

    #nav > ul > li > a {
        font-size: 10px;    
    }

    #nav li ul a {
        font-size: 10px;    
    }
}

@media only screen and ( max-width: 1000px ) {
     #nav {
        font-size: 9px;    
    }

    #nav > ul > li > a {
        font-size: 9px;    
    }

    #nav li ul a {
        font-size: 9px;    
    }
}

@media only screen and ( max-width: 840px ) {
     #nav {
        font-size: 8px;    
    }

    #nav > ul > li > a {
        font-size: 8px;    
    }

    #nav li ul a {
        font-size: 8px;    
    }
}

@media only screen and ( max-width: 750px ) {
     #nav {
        font-size: 7px;    
    }

    #nav > ul > li > a {
        font-size: 7px;    
    }

    #nav li ul a {
        font-size: 7px;    
    }
}

@media only screen and ( max-width: 640px ) {
     #nav {
        font-size: 12px;    
    }

    #nav > ul > li > a {
        font-size: 12px;    
    }

    #nav li ul a {
        font-size: 12px;    
    }
}
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Citlalipop
  • 68
  • 1
  • 11

3 Answers3

1
It responsive function in toggle button to toggle menu show or hide in

responsive view. In right corner the button or there when click that button

your menu will be show or hide. In mobile view using the margin-top to show

the menu toggle button fully. It's a normal responsive menu function.

Dhaarani
  • 1,350
  • 1
  • 13
  • 23
1

Change line 16 to:

#nav > a {
display: none;
z-index:99;}

Then to make it look better, use the same blue for the menu icon; change line 132 to:

background-color: #4484CE;

You could go one step further and use the :active or :visited states or utilize Jquery for the is-clicked, is-open, or other states, e.g.

#nav > a:active{background-color: #93C178;}

Forked and added all that here: http://codepen.io/bobbyfritze/details/WGpmLb/

Bobby Fritze
  • 182
  • 1
  • 8
  • I'll try that out right now. Will let you know how it works. – Citlalipop Sep 25 '16 at 17:51
  • Any reason why I should change the color to the blue? – Citlalipop Sep 25 '16 at 18:01
  • @ Bobby Fritze Thank you so much! Just wondering why I should change it to blue, or if I do, add a border to make it pop more (i don't know, I don't really have an eye for things like this). I just want to know why, and then ask my boss about it and give them your argument. Love the changing color effect! – Citlalipop Sep 25 '16 at 18:11
  • @ Bobby Fritze or should i add a border? If so what color? – Citlalipop Sep 25 '16 at 19:17
  • I recommended blue just because having it green makes it blend into the list items and look a little glitchy. Maybe use a third color if the brand colors allow for one. I would not recommend border since they end up looking kinda boxy instead of smooth. You might try a CSS drop-shadow and/or change the border-radius of the burger icon so it's not a hard square. But those are just design opinions. Throw in what you like and recommend to your boss why it's good for the UX. – Bobby Fritze Sep 25 '16 at 22:22
0

Updates:

Add below code in all your media query @media thus this aligns your burger-menu at top while using that on mobile device.

@media only screen and ( max-width: 640px ) {
     #nav {
        font-size: 12px;    
    }

    #nav > ul > li > a {
        font-size: 12px;    
    }

    #nav li ul a {
        font-size: 12px;    
    }
        #nav > a{
      position:absolute;
      z-index:9;
      right:0;
      top:0;
      background:#111;
    }

}


#nav {
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    width: 100%;
    position: absolute;
    z-index: 2;
    padding-left: 10%;
    padding-right: 10%;
    box-sizing:border-box;  /** add this **/
 -moz-box-sizing:border-box; /** add this **/
 -webkit-box-sizing:border-box; /** add this **/
 -ms-box-sizing:border-box; /** add this **/
   background-color: #4484CE;
}
#nav > a {
    display: none;
}
#nav li {
    position: relative;
}
#nav li a {
    color: #fff;
    display: block;
}

/* first level */

    #nav > ul {
    height: 30px; /* 60 */
    background-color: #93C178;
    list-style: none;
    padding: 0;
}
#nav > ul > li {
    width: 12.5%;
    height: 30px;
    float: left;
}
#nav > ul > li > a {
    height: 30px;
    font-size: 14px;
    line-height: 2.5em; /* 60 (24) */
    text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-decoration: none;
    display:block ;
    color: #FFF; 
    border: 1px solid #4484CE;
    text-shadow: 1px 1px 1px #000; 
}

#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {
    background-color: #F9CF00;
}
/* second level */

    #nav li ul {
    background-color: #93C178;
    display: none;
    position: absolute;
    top: 100%;
    list-style: none;
                  padding: 0;
}
#nav li:hover ul {
    display: block;
    left: 0;
    right: 0;
}
#nav li:not( :first-child ):hover ul {
    left: -1px;
}
#nav li ul a {
    font-size: 14px; /* 20 */
    text-align: center;
    border-top: 1px solid #4484CE;
    padding: 0.75em; /* 15 (20) */
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-decoration: none;
    display:block ;
    color: #FFF; 
    border: 1px solid #4484CE;
    text-shadow: 1px 1px 1px #000; 
    font-size: 14px;
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
    background:#FCFCFC;
    color: #465C8B;
}

@media only screen and ( max-width: 62.5em ) /* 1000 */ {
#nav {
    width: 100%;
    margin: 0;
    z-index: 2;
}
}

 @media only screen and ( max-width: 40em ) /* 640 */ {
html {
    font-size: 75%; /* 12 */
}

#titleBar{
    padding-top: 20px;  
}

#nav {
    top: auto;
    left: auto;
    padding: 0;
    background-color: none;
    z-index: 2;
    width: 100%;
    position: absolute;
    top: 0; 
    background-color: #4484CE;
    height: 5.5%;
}
#nav > a {
    width: 5.125em; /* 50 */
    height: 5.125em; /* 50 */
    text-align: left;
    text-indent: -9999px;
    background-color: #93C178;
    position: relative;
    float: right;
}
#nav > a:before, #nav > a:after {
    position: absolute;
    border: 2px solid #fff;
    top: 35%;
    left: 25%;
    right: 25%;
    content: '';
}
#nav > a:after {
    top: 60%;
}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {
    display: block;
}
/* first level */

    #nav > ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
}
#nav:target > ul {
    display: block;
}
#nav > ul > li {
    width: 100%;
    float: none;
    height: auto;
}
#nav > ul > li > a {
    height: auto;
    text-align: left;
    padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a {
    border-right: none;
    border-bottom: 1px solid #4484CE;
}
/* second level */

                #nav li ul {
    position: static;
    padding: 1.25em; /* 20 */
    padding-top: 0;
}

#header{
    display: none;  
    background-color: #4484CE;
    height: 100%;
}

marquee {
    display: none;  
    background-color: #4484CE;
    height: 100%;
}

}

@media only screen and ( max-width: 1350px ) {
     #nav {
        font-size: 12px;    
    }

    #nav > ul > li > a {
        font-size: 12px;    
    }

    #nav li ul a {
        font-size: 12px;    
    }
    #nav > a{
      position:absolute;
      z-index:9;
      right:0;
      top:0;
      background:#111;
    }
}

@media only screen and ( max-width: 1180px ) {
     #nav {
        font-size: 10px;    
    }

    #nav > ul > li > a {
        font-size: 10px;    
    }

    #nav li ul a {
        font-size: 10px;    
    }
        #nav > a{
      position:absolute;
      z-index:9;
      right:0;
      top:0;
      background:#111;
    }

}

@media only screen and ( max-width: 1000px ) {
     #nav {
        font-size: 9px;    
    }

    #nav > ul > li > a {
        font-size: 9px;    
    }

    #nav li ul a {
        font-size: 9px;    
    }
        #nav > a{
      position:absolute;
      z-index:9;
      right:0;
      top:0;
      background:#111;
    }

}

@media only screen and ( max-width: 840px ) {
     #nav {
        font-size: 8px;    
    }

    #nav > ul > li > a {
        font-size: 8px;    
    }

    #nav li ul a {
        font-size: 8px;    
    }
        #nav > a{
      position:absolute;
      z-index:9;
      right:0;
      top:0;
      background:#111;
    }

}

@media only screen and ( max-width: 750px ) {
     #nav {
        font-size: 7px;    
    }

    #nav > ul > li > a {
        font-size: 7px;    
    }

    #nav li ul a {
        font-size: 7px;    
    }
        #nav > a{
      position:absolute;
      z-index:9;
      right:0;
      top:0;
      background:#111;
    }

}

@media only screen and ( max-width: 640px ) {
     #nav {
        font-size: 12px;    
    }

    #nav > ul > li > a {
        font-size: 12px;    
    }

    #nav li ul a {
        font-size: 12px;    
    }
        #nav > a{
      position:absolute;
      z-index:9;
      right:0;
      top:0;
      background:#111;
    }

}
<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a>

<ul class="clearfix">
<li><a href="index.html">Home</a></li>

<li><a href=""><span>About Us</span></a>
 <ul>
    <li><a href="principal's_message.html">Principal's Message</a></li> 
    <li><a href= "mission_and_vision.html">Mission and Vision</a></li> 
 <li><a href= "our_history.html">Our History</a></li> 
 <li><a href= "staff_directory.html">Staff Directory</a></li> 
 <li><a href= "links.html">Links</a></li> 
 <li><a href= "photo_gallery.html">Photo Gallery</a></li> 
    </ul>
    </li>
    
<li> <a href=""><span>School Offices</span></a>
 <ul>
    <li><a href="attendance_office.html">Attendance</a></li> 
 <li><a href= "counseling_office.html">Counseling</a></li> 
 <li><a href= "main_office.html">Main</a></li> 
 <li><a href= "magnet_office.html">Magnet</a></li> 
 <li><a href= "bridge_office.html">Bridge</a></li> 
 <li><a href= "english_learner's_office.html">EL</a></li>
 <li><a href= "itd_office.html">ITD</a></li> 
 <li><a href= "library.html">Library</a></li> 
 <li><a href= "parent_center.html">Parent Center</a></li>
 <li><a href= "nurse's_office.html">Nurse</a></li> 
 <li><a href= "safety_ofifice.html">Safety</a></li> 
 <li><a href= "plant_manager's_office.html">Plant Manager</a></li> 
 <li><a href= "cafeteria.html">Cafeteria</a></li> 
 <li><a href= "student_store.html">Student Store</a></li> 
      </ul>
      </li>
      
<li> <a href=""><span>Academics</span></a>
 <ul>
   <li><a href= "classes_homework.html">Classes/Homework</a></li> 
 <li><a href= "culmination_requirements.html">Culmination</a></li> 
 <li><a href= "departments.html">Departments</a></li> 
 <li><a href= "counseling_office.html">Counseling</a></li> 
 <li><a href= "library.html">Library</a></li> 
    </ul> 
</li>

<li> <a href=""><span>Programs</span></a>
 <ul>
    <li><a href= "http://www.bancroftib.weebly.com" target="new">IB</a></li> 
 <li><a href= "middle_years_programme.html">The Middle Years</a></li> 
 <li><a href= "ste[+a]m_program.html">STE[+a]M</a></li> 
 <li><a href= "performing_arts_program.html">Performing Arts</a></li> 
 <li><a href= "vei-jv.html">VEI-JV</a></li> 
 <li><a href= "gate_sas_program.html">GATE/SAS</a></li> 
 <li><a href= "http://lacerstars.org/" target="new">LACER</a></li> 
    </ul>
</li>

<li> <a href=""><span>Students</span></a>
 <ul>
    <li><a href= "cougar_news.html">Cougar News</a></li>
 <li><a href= "bell_schedule.html">Bell Schedule</a></li> 
    <li><a href= "classes_homework.html">Classes/Homework</a></li> 
 <li><a href= "dress_code.html">Dress Code</a></li> 
 <li><a href= "cougar_code.html">Cougar Code</a></li> 
 <li><a href= "attendance_policy.html">Attendance Policy</a></li> 
 <li><a href= "culmination_requirements.html">Culmination</a></li> 
 <li><a href= "http://www.bancroftib.weebly.com/learner-profile.html" target="new">IB Learner Profile</a></li> 
 <li><a href= "http://achieve.lausd.net/cms/lib08/CA01000043/Centricity/Domain/317/24359_OSO_PrntStdntHndbk1516_eng.pdf" target="new">Student Handbook</a></li> 
 <li><a href= "library.html">Library</a></li> 
 <li><a href= "map.html">Map</a></li> 
 <li><a href= "http://achieve.lausd.net/site/default.aspx?PageType=3&ModuleInstanceID=1555&ViewID=7B97F7ED-8E5E-4120-848F-A8B4987D588F&RenderLoc=0&FlexDataID=16590&PageID=845" target="new">Food Menu</a></li> 
 <li><a href= "student_store.html">Student Store</a></li> 
 <li><a href= "http://www.bancroftmiddleschool.org/2015-16yearbook/index.html" target="new">Yearbook</a></li> 
    </ul>
</li>

<li> <a href=""><span>Parents</span></a>
 <ul>
    <li><a href= "parent_bulletin.html">Parent Bulletin</a></li>
 <li><a href= "cougar_news.html">Cougar News</a></li>
 <li><a href= "parent_center.html">Parent Center</a></li>
 <li><a href= "calendar.html">Calendar</a></li> 
 <li><a href= "bell_schedule.html">Bell Schedule</a></li> 
    <li><a href= "classes_homework.html">Classes/Homework</a></li> 
 <li><a href= "culmination_requirements.html">Culmination</a></li> 
 <li><a href= "http://achieve.lausd.net/cms/lib08/CA01000043/Centricity/Domain/317/24359_OSO_PrntStdntHndbk1516_eng.pdf" target="new">District Handbook</a></li>
 <li><a href= "school_site_council.html">SSC Council</a></li> 
 <li><a href= "school_decision_making_council.html">SDM Council</a></li> 
 <li><a href= "elac.html">ELAC</a></li> 
 <li><a href= "contact_teachers.html">Contact Teachers</a></li> 
    </ul>
</li>

<li><a href="contact.php">Contact Us</a></li>

  </ul>
</nav>
frnt
  • 8,455
  • 2
  • 22
  • 25
  • @Citlalipop I have changed your burger-menu color, change that back to default which you had before. – frnt Sep 25 '16 at 17:28
  • I'll try that out right now. Will let you know how it works. (and i don't have enough reputation to show my upvotes) – Citlalipop Sep 25 '16 at 17:51
  • @Citlalipop no issue regarding up-vote, it's just that at some point some user may have some queries like you had, so at-least at that time they should go through a right answers. – frnt Sep 25 '16 at 18:03
  • Yeah, I know. Just letting you know mine won't show. Thank you so much! – Citlalipop Sep 25 '16 at 18:08
  • User who did down-vote, could you please explain reason for that, would be helpful for me. – frnt Sep 26 '16 at 05:13