导航隐藏菜单图标

Question

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;    
    }
}

Answer 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.

Answer 2

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, eg

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

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

Answer 3

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>