Citlalipop Citlalipop - 2 months ago 7
CSS Question

Navigation Hides Menu Icon

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

Comments