Masking of the Navigation Button

Question

Masking of the Navigation Button

I designed a responsive navigation bar, but in mobile view, the menu icon is being hidden by the menu headings when displayed. Check out the scenario below with a provided CodePen link. I attempted to adjust padding and float properties without success. Any help would be greatly appreciated!

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

After Clicking Menu Icon:

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>

        <!-- more list items here -->

    </ul>
</nav>

CSS:

#nav {
    margin-left: auto;
    /* Other styles here */
}

/* Additional CSS rules for different media queries */

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

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

html css responsive-design responsive-nav responsive-navigation

Answer 1

Answer №1

Toggle menu display functionality is implemented through a responsive button, allowing users to show or hide the menu in a responsive view. The toggle button is located in the top right corner of the screen, and when clicked, it will either reveal or conceal the menu. When viewed on mobile devices, the margin-top property is utilized to fully display the menu toggle button. This feature provides a typical responsive menu behavior.

Answer 2

Toggle menu display functionality is implemented through a responsive button, allowing users to show or hide the menu in a responsive view. The toggle button is located in the top right corner of the screen, and when clicked, it will either reveal or conceal the menu. When viewed on mobile devices, the margin-top property is utilized to fully display the menu toggle button. This feature provides a typical responsive menu behavior.

Answer 3

Answer №2

Modify line 16 to:

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

To enhance the appearance, update line 132 to use a blue color for the menu icon:

background-color: #4484CE;

For additional customization, consider utilizing the :active or :visited states or incorporating Jquery for different states like is-clicked or is-open:

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

Check out the modified version here: http://codepen.io/bobbyfritze/details/WGpmLb/

Answer 4

Modify line 16 to:

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

To enhance the appearance, update line 132 to use a blue color for the menu icon:

background-color: #4484CE;

For additional customization, consider utilizing the :active or :visited states or incorporating Jquery for different states like is-clicked or is-open:

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

Check out the modified version here: http://codepen.io/bobbyfritze/details/WGpmLb/

Answer 5

Answer №3

Important Note:

Please ensure to insert the following code in all your media query @media statements to properly position your burger-menu at the top when viewed on a 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;
}
}

...
  
</nav>

Answer 6

Important Note:

Please ensure to insert the following code in all your media query @media statements to properly position your burger-menu at the top when viewed on a 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;
}
}

...
  
</nav>

Masking of the Navigation Button

Answer №1

Answer №2

Answer №3

Similar questions

Stop the image transformation/transition when the back face is not visible

Generating an interactive 3D model of a web page embedded within a virtual environment

Error: The ORM class object cannot be converted to a string. <img src>

Deleting a hyperlink within a content-editable area

The erratic nature of Tailwind actions

Images in CSS accordion not displaying correctly in WordPress website

Changing the color of an Angular <div> element with scripting

Where do JQuery and framesets vanish to?

Employ a for loop to generate custom shapes within the canvas

HTML, JavaScript, and PHP elements combine to create interactive radio buttons that trigger the appearance and disappearance of mod

Checking the length of user input with JavaScript

Tips for removing a row from a table

How can I iterate over an array in JavaScript to create posts for an HTML feed using Bootstrap?

Pressing the tab key while using Angular will halt any additional processes from running

Is there a way to conceal the parent element when the child element is hidden from view?

Ensuring each field is filled correctly in a step-by-step registration form

Sleek design featuring a header, footer, Left Menu, Content, and RightMenu implemented on Bootstrap 4-5

Mastering the Art of Restricting an IP Address Range with FILTER_VALIDATE_IP

Aligning input and submit fields perfectly in the same line

The top margin is experiencing issues and is not functioning correctly