Navigation Hides Menu Icon
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;
}
}
3 answers
solution1
1 2016-09-25 17:13:20
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.
solution2
1 2016-09-25 17:28:00
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/
solution3
0 ACCPTED 2016-09-25 17:26:23
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Navigation menu hides position
Icon navigation menu
Menu Icon for Side Navigation
Drop Down Navigation Menu Hides All the Page Contents
My burger icon is not displaying the navigation menu
Adding a hamburger icon to an existing navigation menu
How to make a responsive navigation bar with menu icon
How to center the burger icon vertically in the navigation menu?
Adding my own menu icon for navigation bar?
responsive side navigation menu with hamburger icon
Related Tags