CODEWITHSUNDEEP
htmlcssresponsive-designresponsive-navresponsive-navigation
Citlalipop
Citlalipop

Reputation: 68

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

Upvotes: 0

Views: 509

Answers (3)

frnt
frnt

Reputation: 8795

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>

Upvotes: 0

Bobby Fritze
Bobby Fritze

Reputation: 182

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/

Upvotes: 1

Dhaarani
Dhaarani

Reputation: 1360

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.

Upvotes: 1

Related Questions