The website's content is displayed as a mobile-friendly menu

I've been working on creating a responsive menu using HTML and CSS, and everything is functioning well so far. However, I'm facing an issue with the mobile view of the menu. When the menu opens up, it obstructs the text below it, making it difficult for users to see the menu items.

html, body{
    width:100%;
    height:100%;
    margin:0;
}
html {
    font-family:"helvetica neue", sans-serif;
}
.nav{
    border-bottom: 1px solid #eaeaeb;
    text-align:right;
    height:50px;
    line-height:50px;
}
.menu{
    margin:0 30px 0 0;
}
.menu a{
    clear:right;
    text-decoration:none;
    color:gray;
    margin: 0 10px;
    line-height: 50px;
}
span{
    color:#54D17A;
}
label{
    margin:0 40px 0 0;
    font-size:26px;
    line-height: 50px;
    display: none;
    width:26px;
    float:right;
}
#toggle{
    display:none;
}

/*Media*/
@media only screen and (max-width:500px){
    label{
        display:block;
        cursor: pointer;
    }
    .menu{
        text-align: center;
        width:100%;
        display:none;
    }
    .menu a{
        display: block;
        border-bottom: 1px solid #eaeaeb;
        margin:0;
        line-height: 50px;
    }
    #toggle:checked + .menu{
        display:block;
    }
    #menu a:clicked + .menu {
        display:none;
    }

}
<div class="nav">
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle"/>
        <div class="menu">
            <a href = "#">Business</a>
            <a href = "Services.html">Services</a>
            <a href = "#">Learn more</a>
            <a href = "#"><span>Free Trial</span></a>
        </div>
    </div>
    <div class="stuff">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus similique voluptatum quas sit accusantium molestiae, cupiditate magnam soluta, ab inventore possimus placeat ipsum eum perspiciatis ipsam nobis nulla tenetur assumenda.
    </div>

In the mobile view, when the menu is opened, it overlaps with the content below. Is there a way to push the content down so that the menu remains visible? Alternatively, are there any other solutions to ensure that both the menu and toggle icon are clearly visible to users?

htmlcss

Answer №1

To resolve this issue, where you want the navigation to appear in front of the content, follow these two steps: give the navigation a background color and assign it a higher z-index value than the main content. This way, the menu will be displayed in front while the content remains behind.

.menu {
    margin:0 30px 0 0;
    
    /* place the menu in front of the content */
    position: relative;
    z-index: 2;

    /* ensure that the content doesn't show through from behind */
    background-color: white;
}

If your intention is for all the content to shift down vertically so that it appears below the navigation, please refer to Epicular's alternative solution.

Answer №2

Implementing a JavaScript Menu Toggle Function

  html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  font-family: "helvetica neue", sans-serif;
}

.nav {
  border-bottom: 1px solid #eaeaeb;
  text-align: right;
  height: 50px;
  line-height: 50px;
}

.menu {
  margin: 0 30px 0 0;
}

.menu a {
  clear: right;
  text-decoration: none;
  color: gray;
  margin: 0 10px;
  line-height: 50px;
}

span {
  color: #54D17A;
}

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 50px;
  display: none;
  width: 26px;
  float: right;
}

#toggle {
  display: none;
}


/*Media*/

@media only screen and (max-width:500px) {
  .stuff {
  position:relative;
    z-index: 9;
  }
  label {
    display: block;
    cursor: pointer;
  }
  .menu {
    text-align: center;
    width: 100%;
    background: #333;
    position:relative;
    z-index: 99;
  }
  .menu a {
    display: block;
    border-bottom: 1px solid #eaeaeb;
    margin: 0;
    line-height: 50px;
  }
  #toggle:checked+.menu {
    display: block;
  }
  #menu a:clicked+.menu {
    display: none;
  }
<div class="nav">
  <label for="toggle">&#9776;</label>
  <input type="checkbox" id="toggle" />
  <div class="menu">
    <a href="#">Business</a>
    <a href="Services.html">Services</a>
    <a href="#">Learn more</a>
    <a href="#"><span>Free Trial</span></a>
  </div>
</div>
<div class="stuff">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus similique voluptatum quas sit accusantium molestiae, cupiditate magnam soluta, ab inventore possimus placeat ipsum eum perspiciatis ipsam nobis nulla tenetur assumenda.
</div>

Answer №3

The reason for this behavior is due to the fixed height of 50px set on your nav class. Removing this in your media query will allow the menu to occupy its own space and push the text downwards.

Answer №4

@media only screen and (max-width: 500px){
    .nav{
        position: relative;
    }

    #toggle:checked + .menu {
        display: block;
        position: absolute;
        top: 51px;
        z-index: 100;
        background: #fff;
    }
}

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

Help needed with CSS menu dropdown problem

Hello everyone, I am currently working on creating a menu for the top navigation of my website. My goal is to have a list of items appear below the menu when hovering over it with the mouse. Right now, I am testing this on a local HTML file before impleme ...

htmlcss

I am experiencing issues with my INSERT INTO statement

I've been working on creating a news system that allows users to fill out a form to post an article. However, despite multiple attempts and methods, my INSERT INTO query doesn't seem to be functioning properly. I have two separate files for this ...

phphtmlmysqlinsert-into

The href attributes are not being retrieving correctly

I'm currently working on extracting the URLs for each restaurant listed on this page and have developed a Python script for this purpose: import time from selenium import webdriver from selenium.webdriver.common.keys import Keys browser = webdriver ...

pythonhtmlseleniumselenium-webdriver

Issues with Implementing Bootstrap Dropdown Menu in Django

https://i.sstatic.net/ddVL6.png ...

htmlcssdjangobootstrap-4django-templates

Align the input labels to the right

In the demonstration below, an example is provided for aligning labels to the right of an input field. Is there a way to ensure that the input field takes up 100% of the width? Additionally, can an input be replaced with a textarea or another div element w ...

htmlcss

Is the displayed Cyrillic string in the incorrect character set?

I am facing an issue with extracting a value from a decoded JSON response obtained from a Russian API. The value within the JSON = Object268 Initially, it appeared as: Объект 268 After including <meta charset="utf-8"> in my html ...

phphtmlcharacter-encodingjson

Does the browser detect the HTML version of the document?

I discovered that my HTML 4 document successfully utilized the required attribute from HTML 5, displaying a red error border when an input was left empty. It seems like the browser interpreted the document as HTML 5 and disregarded the DOCTYPE declaration. ...

htmlgoogle-chromehtml4

Why are two vertical scrolls appearing on the screen simultaneously?

I utilized this method to hide the body scrollbar initially and then display it upon clicking a link: $('body').css('overflow', 'hidden'); $('#site').click(function(e) { $('#wrapper').remove(); $(& ...

javascriptjquerycssoverflow

Learn how to activate a JS native event listener using jQuery for the 'change' event

This question is unique from the one found at How to trigger jQuery change event in code. The focus here is on the interaction of jQuery with native event listeners, rather than jQuery event listeners. I am using addEventListener to bind a change event fo ...

javascriptjqueryhtmladdeventlistener

React - CSS Transition resembling a flip of a book page

As I delve into more advanced topics in my journey of learning React and Front Web Dev, I discovered the ReactCSSTransitionGroup but learned that it is no longer maintained so we now use CSSTransitionGroup. I decided to create a small side project to expe ...

javascriptreactjscsscss-transitionsreactcsstransitiongroup

Developing an Easy-to-Use PDF Popup Interface

I need a simple PDF modal where I can input the text: 'The sky is blue' and have it link to a PDF that opens up when clicked. I found a similar sample online, but it includes an image plus an image modal that pops up. I want to replace the imag ...

javascripthtmlcsssimplemodal

Is the drag-and-drop feature not working properly?

I'm new to coding in Javascript and I'm attempting to insert an image inside a border created with CSS. Unfortunately, the script doesn't seem to be working properly. It's possible that there is a small error in the code causing the iss ...

javascriptjqueryhtmlcss

Formatting text over an image

The challenge I am facing involves having an image and text on it in two separate divs with a background color. The length of the text in one div is long while the text in the second div is short, but I want to ensure that the width of both divs are equal. ...

htmlcss

"Troubleshooting: Why is :last-child not applying styles to my final

I'm encountering an issue in my example where the last </li> doesn't display properly when using :last-child. In the provided code, you can observe that when I target the last element with the class "aa," it shows the "+ Add" text. &.a ...

css

Angular: Radio button groups are not responding correctly when populated within a loop using ng-repeat

My goal is to populate multiple sets of radio buttons in a loop by combining the group name and index to ensure each set is uniquely grouped. However, I am facing an issue where only the last group in the loop has a checked radio button, while all other gr ...

javascripthtmlangularjsradio-buttonangularjs-ng-repeat

Can you explain the function of mdLiveAnnouncer in Angular Material and how it operates?

Could someone provide an explanation of $mdLiveAnnouncer using this code snippet? module.controller('AppCtrl', function($mdLiveAnnouncer) { // Making a basic announcement (Polite Mode) $mdLiveAnnouncer.announce('Hey Google'); // ...

javascripthtmlcssangularjsangular-material

Position the menu directly below the MaterialUI appbar

Here is a method for positioning a Menu (popover) below its parent item using the anchorEl. However, I am curious if there is an easier way to adjust the menu placement to be directly under the appbar while still aligning horizontally with the parent butto ...

jquerycssreactjsmaterial-ui

Responsive design and column alignment dilemma

I'm attempting to create a layout using Bootstrap 3.2.0 with tiled divs in a single row for screens wider than 768px. The divs have heights of either 50px or 100px, controlled by the classes "home-height-single" and "home-height-double," and widths ad ...

htmlcsstwitter-bootstraptwitter-bootstrap-3css-float

Three-dimensional.js and components of the design

Looking for advice on how to manipulate individual parts of a 3D model in Three.js. My model is made up of various components that I need to control separately. Any tips or suggestions would be greatly appreciated. Thank you! ...

jsonhtmlthree.jswebgl

JavaScript encounters an Access Denied error when attempting to read data from a JSON file in

My code is experiencing issues on IE browser and Chrome, but works perfectly on FireFox. var currentPage = 1; var max = 0; var myList = []; var links = []; $.ajax({ cache: false, type : 'GET', crossDomain: true, ...

javascripthtmljsonajaxinternet-explorer