What is the best way to move menu content downward when the hamburger icon is pressed?

Is it possible to make the hamburger icon push down the content, including the background and text, when clicked? I've attempted to adjust padding on the body and set the width of the hamburger icon, but so far it hasn't been successful. I've spent the last few hours trying to get it right. Ideally, I'd like to achieve this using just CSS.

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  text-align: right;
  padding: 10px;
  background: var(--bg-color);
  width: 100vw;
  z-index: 2;
}

.mobile-nav .menu {
  display: flex;
  text-align: center;
  justify-content: center;
  display: none;
}

.mobile-nav .menu ul li {
  list-style: none;
  padding: 0.1rem;
  font-size: 1.2rem;
}

.mobile-nav #toggle {
  display: none;
  cursor: pointer;
}

.mobile-nav #toggle:checked + .menu {
  display: flex;
}
<div class="mobile-nav">
    <label for="toggle"><i class="fas fa-bars fa-2x"></i></label>
    <input type="checkbox" id="toggle">
    <div class="menu">
      <ul>
        <li><a href="#home">HOME</a></li>
        <li><a href="#promise">OUR PROMISE</a></li>
        <li><a href="#team">TEAM</a></li>
        <li><a href="#sponsors">SPONSORSHIPS</a></li>
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
  </div>

htmlcssflexbox

Answer №1

To organize your main content, place it within a div and make adjustments to the top margin when expanding the menu.

Check out the Live Demo

Here is the HTML structure:

<body id="body">
    <div class="mobile-nav">
        <label for="toggle">button</label>
    <input type="checkbox" id="toggle" onclick='onClickHandler(this)'>
    <div class="menu">
      <ul>
        <li><a href="#home">HOME</a></li>
        <li><a href="#promise">OUR PROMISE</a></li>
        <li><a href="#team">TEAM</a></li>
        <li><a href="#sponsors">SPONSORSHIPS</a></li>
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
  </div>

  <div id="content">
    Content
  </div>
</body>

<script>
function onClickHandler(e){
  var content = document.getElementById("body");

  if(e.checked){
     content.setAttribute( 'class', 'push-down' );

  }else{
     content.setAttribute( 'class', '' );
  }
}
</script>

The corresponding CSS styling would be:

//.. your styles 

#content{
  height:300px;
  background-color:yellow;
  margin-top:50px;
}

#body.push-down{
  margin-top:250px;
}

Answer №2

To hide the div.menu, you can utilize max-height: 0px; and overflow: hidden; instead of using display: none;. Implement an animation for max-height on toggle.

Javascript code for toggling classes:

$('#toggle').on('click', function(){
    $('.mobile-nav .menu').toggleClass('active'); //Toggle Class on Click
});

Cascading Style Sheets (CSS):

.menu {
    height: auto;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-in;
}
.menu.active {
    max-height: 500px; //Choose a value higher than the menu height
}

Watch a demonstration here: https://jsfiddle.net/rbzfk0ca/36/

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

When the script is placed at the end of the file, document.getElementById() is still returning null

I need assistance with running a JavaScript function that is located at the end of my .aspx file. This is the div tag in question: <div id="div_NRContainer" oninit="div_NRContainer_Init" class="panelContainer" runat="server"> Following this, with ...

javascripthtmlasp.net

Remove the presence of a black square when selecting elements using CSS

Update: After some investigation, I discovered that the mysterious black square is actually a part of the scroll bar. By adding the following code snippet: select::-webkit-scrollbar { display: none; } The square no longer appears. Initially, my se ...

css

Tips on organizing and designing buttons within a canvas

let canvas = document.getElementById("canvas"); let context = canvas.getContext("2d"); // for canvas size var window_width = window.innerWidth; var window_height = window.innerHeight; canvas.style.background="yellow" canvas.wid ...

javascripthtmlcsscanvashtml5-canvas

I am interested in creating a similar layout using Bootstrap Studio

I've been attempting to align a text with borders and a button in one row, similar to the layout shown in this image, but I keep failing. I've experimented with different layouts such as two-column layout, one row, two-column layout, simple div, ...

htmlcssbootstrap-4bootstrap-studio

What is the reason for this only functioning with the "!important" declaration?

Can anyone help me troubleshoot this code? It seems to only work with the !important rule, which I prefer not to use. I believe there must be a way to achieve the desired outcome without relying on it. What's intriguing is that the CSS line in questi ...

htmlcss

Ways to get rid of the white horizontal line generated by bootstrap framework?

I'm currently working on a responsive navbar design and I want it to appear transparent over a background image. However, my front-end knowledge is limited as I've only been learning for a week. Can anyone advise me on how to remove the white bar ...

htmlcsstwitter-bootstrapbootstrap-5

Is the 'Access-Control-Allow-Origin' header preventing the retrieval of cross-domain JSON data?

My goal is to retrieve a JSON object from the following URL. I attempted to use the XMLHttpRequest() function in JavaScript, but encountered an error in the console: [CORS] The origin 'http://localhost' did not find 'http://localhost' i ...

javascripthtmljsoncross-domain

Understanding HTML through regular expressions

Can anyone assist me in finding the regular expressions needed to parse an HTML file for a program I'm working on? Here are some specific ones I'm looking for: <div> <div class=”menuItem”> <span> class=”emph” Any str ...

htmlregexparsing

bourbon neat quadrilateral layout

Attempting to revamp someone else's messy, yet effective, CSS3 template into a more organized format. The transition to bourbon/neat has been smooth, but I'm facing a roadblock when it comes to creating a responsive image grid. <section class ...

csssassbourbonneat

Is the Expand All / Collapse All feature malfunctioning when used with a tree table?

I have been working on implementing the Expand All/Collapse All feature for a nested tree table, but unfortunately, I am not achieving the desired output. I referred to a related question on this topic which can be found here. You can also view the code on ...

javascripthtmljquery

Comment sections that refresh automatically after being posted

I am determined to provide a clear explanation. Despite having some code, I am uncertain about how to make it clone comments and add new ones with user inputted text. Below is the snippet of code I am struggling with: <!DOCTYPE html> <!-- this i ...

javascriptjqueryhtmldom

Mobile phone web development using HTML5

I am currently facing an issue with playing sound on mobile browsers. In my code snippet, I have the following: Response.Write("<embed height='0' width='0' src='Ses.wav' />"); While this works perfectly fine on desktop ...

javascripthtmlaudiomobile

Issue with email layout formatting in Outlook 2013 on Windows 7

I have made some modifications to an email template originally designed by Campaign Monitor. The template is responsive and functions well on most email clients. However, I am facing formatting issues with the email header specifically on Outlook 2013 whe ...

htmlcssemailoutlook

Implement a delay for updating the style of a button by using the setTimeout function

Is it possible to create a button that, when clicked, changes color to green and then reverts back to its original style after 3 seconds? I am able to change the button color using an onClick event in my script. However, I encounter scope errors when tryi ...

javascripthtmlcss

A div element appears without any height if there is an image contained within it

I am facing a challenge with a div[div1] that contains other elements. The elements inside have an absolute positioned image, and both div1 and the elements have a float left property without showing any height. Is there a solution to give div1 a height so ...

htmlcss

Aligning figures using the col-sm-4 command in Bootstrap styling

I am struggling to horizontally align three elements using the col-sm-4 function, but unfortunately, it's not working as expected. No matter what I try, the items remain aligned to the left and stacked vertically. The images are all of equal size. Be ...

htmlcsstwitter-bootstrap

Guide to repositioning elements and fixing the functionality of the hamburger button: [ HTML & Bootstrap ]

Looking for help with creating a navbar for a website using HTML and Bootstrap. Need to move the header and link to the ends of the navbar and ensure that the hamburger button displays correctly on different screen sizes. Here's how it looks on deskt ...

htmlcssdeploymentbootstrap-5responsiveness

What's the best way to retrieve the nth row of a div once the mouse hovers over

$(document).ready(function() { $('div').on('mouseover', function() { alert($('div:eq(' + this + ')')); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></ ...

jqueryhtml

Ways to eliminate the border of a text area when it is in focus

I successfully managed to eliminate the border around the text area, but I want it so that users cannot see a border even when they click on it. Below is my current CSS code. .comments{ border: 0 none #FFF; overflow: hidden; } I attempted to make ...

htmlcss

Applying CSS to an iframe using JavaScript: A Step-by-Step

I have an Iframe editor and I am trying to change some CSS inside the editor. However, when I attempt to apply the CSS, it does not affect the styles within the Iframe. <div id="editor" style="flex: 1 1 0%;"> <iframe src="https://editor.unlay ...

javascripthtmlcssreactjsdom