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;    
    }
}
htmlcssresponsive-designresponsive-navresponsive-navigation

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is JQueries Live functionality compatible with IE8?

Incorporating the JQuery fancy box, I have implemented a pop-up form with select fields that dynamically update a span element upon selection change. Although it works well thanks to fellow Stack Overflow users' help, it unfortunately does not functio ...

javascriptjqueryhtml

Issue with checkboxes preventing submission of form

Currently working on a website project for a company that requires certain steps to be completed for deliveries. Unfortunately, I am facing issues with the submit button, and I apologize as I am still new to this. The code I have pasted is divided into tw ...

javascriptphphtmlcss

Attempting to replicate the flipping motion of a card by applying the transform property to rotate a div element, ultimately revealing a different

I am attempting to create a series of divs that simulate the flipping action of a notecard. Unfortunately, when I hover over the div, it turns white because I have set the display property to none. I am unsure how to make the other div (.back) visible. Y ...

htmlcss

Issues with JQuery list selectors

Many individuals have raised concerns about selectors in the past, but no matter what I try, my code seems right yet it doesn't work as intended. My situation involves a list of actions that are displayed or hidden when their corresponding "folder" is ...

javascriptjqueryhtmljquery-selectorshtml-lists

Guidance on Configuring Django Static Files

For setting up my Django static files, I added the following code to settings.py: STATIC_URL = '/static/' STATIC_DIRS = [ os.path.join(BASE_DIR, 'static') ] STATIC_ROOT = os.path.join(BASE_DIR, 'assets') To implement this ...

pythoncssdjangodjango-staticfiles

Adjusting the height of an element based on changes in screen width or height using Angular

I'm in the process of developing a directive that can detect changes in screen size, either width or height, and adjust the height of my element accordingly. The main goal is to have my element extend all the way to the bottom of the browser window. ...

angularjscssangularjs-directive

The mobile page is refusing to scroll, causing all the text to bunch up at the top of the screen

After learning HTML/CSS/Js/PhP over a few months, I recently completed my first website. I am facing an issue with one of the pages on my website when viewed on a mobile device. The parallax scrolling header image does not scroll either horizontally or ve ...

htmlcss

Effortless sliding panel that appears on hover and vanishes when mouse is moved away

I am in the process of creating a menu for my website that utilizes linkbuttons which trigger additional linkbuttons to slide down upon hover. The desired effect is a smooth sliding panel that appears when hovering over the linkbutton, and disappears when ...

javascriptjqueryhtmlcss

The view has no access to $scope but the controller does

I need to display the iso code using a $scope when selecting a country from a list. The list of countries is fetched through a $http call in a factory and then stored in a scope. ///////// get countries //////////////// tableFactory.getCountries().then(f ...

javascripthtmlangularjs

Show a PDF document on the webpage by making an ajax request in a C# MVC application

Using ItextSharp, I am creating a Pdf from html and trying to show a preview of the Pdf on the screen for the user to interact with. Although the Pdf generation is correct, I am struggling to display it on the screen. Here is the Ajax call: function Pre ...

c#htmlajaxasp.net-mvcpdf

Searching text on an iPhone using regex patterns

Currently, I have been utilizing the following regular expression: <li class=\"b_algo\"><h2><a href=\"(.*?)\" In my search within NSString, I am interested in modifying this search to also include : <li class=\ ...

htmliosobjective-cregex

Is it impossible to style an element within a div tag?

How can I apply styling to a specific div with id="1", which contains class="match"? Here is the code: <div class="col-lg-3"> <div id="1"> <p class="match">Match {this.state.matches[0].id}</p> <div class="tea ...

htmlcsstwitter-bootstrap

Unable to showcase the compilation in PDF form

I have a link on my page that, when clicked by the user, retrieves a list from the database using an ajax call and displays it. Now, I'm looking to add another link that, when clicked, will fetch the list from the database via ajax and present it in ...

jqueryhtmlcssajaxpdf

Retrieving text content from an HTML element with Jsoup for web page manipulation

My task involves extracting text content from a specific HTML element <span class="adr" style="float: none !important;"> <span class="street-address" style="float: none !important;">18, Jawaharlal Nehru Road, </span> ...

htmlhtml-parsingjsoup

The radial gradient in d3.js does not properly affect paths

My goal is to create a radial gradient on my path element, but for some reason the radial gradient does not apply correctly. Can anyone help me troubleshoot this issue? Below is my updated code: // Define the canvas / graph dimensions var margin = {top: ...

javascriptcssd3.js

Displaying Empty Boxes using Font Awesome

I was able to show Font Awesome properly before, but now it's not working even though I haven't made any changes. I've attempted various solutions but nothing seems to be fixing the issue. My goal is to display it as a placeholder. Below is ...

htmlcsstwitter-bootstrapfont-awesomebootstrap-4

Border provides spacing within a div using the box-sizing property set to border-box

I am facing an issue where I have a div with the class "outer" containing another div with the class "inner". Upon adding a 2px border to the "outer" div, padding is automatically applied in a way that appears as 1px padding on the top, left, and right sid ...

htmlcsscss-position

How can I specifically target and count children from a certain class using CSS selectors?

Consider this HTML structure with items arranged at the same level: <div class="h2">Title: Colors</div> <div class="pair">Hello world (1)</div> <div class="pair">Hello world (2)</div> <div class="pair">Hello wo ...

htmlcsscss-selectors

Adjust the width of the button to best fit the content or label

Here we have a screenshot of HTML source code showing a button that is wider than the content it contains. The highlighted area in yellow indicates there is extra space at the right side of the button due to it being displayed on multiple lines. Is this be ...

htmlcssbuttonangular-material-table

Problem with onblur and onchange events not being triggered in input tag

After encountering this issue, I came to the realization that the events onblur and onchange function properly. However, I noticed that if your page contains only ONE <input type="text" onblur="loadXMLDoc()"> Change Content</input> The behav ...

javascriptajaxhtml