0

I am trying to move the "mynav" section up so that it can become a child of body (very top of html). This should apply only in mobile version of the website.

Another topic I found and tried to utilize:

How to move all HTML element children to another parent using JavaScript?

http://jsfiddle.net/62f9L/

I tried the thing specified in this topic up top but I dont think I was really successful as it was still positioning itself under id="burger"

var myNav = document.getElementById('myNav');
var myBody = document.getElementById('myBody');

while (myBody.childNodes.length > 0) {
    myNav.appendChild(myBody.childNodes[0]);
}

https://jsfiddle.net/8n6wjtm7/

I want "mynav" to be moved under body element in mobile version. I would like to use it for full page opening. Is there a way to do this only in Javascript? I don't really prefer Jquery. Thanks.

Codecygen
  • 121
  • 1
  • 1
  • 10
  • 1
    Can you give a big-picture description of what you're trying to achieve? If it's simply a standard responsive mobile menu (aka 'hamburger' menu), then you shouldn't have to do any DOM changes. Your HTML structure should remain static, and you use either CSS to do a hover drop-down menu, use the checkbox hack, or use JS to get better control. There's 1000's of tutorials on Google for mobile responsive menu's, just get one demo working on your own page. – Kalnode Dec 27 '18 at 18:42
  • https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_full As you can see in this example
    which serves as a navbar is under so they wrote css to make it occupy whole window... It is under
    in mine so it does not occupy the whole window as you can see in my code.
     – Codecygen Dec 27 '18 at 19:19
  • @MarsAndBack I solved this the answer is down below. Thanks for your post :). – Codecygen Dec 28 '18 at 18:11

1 Answers1

0

OK. So I solved this. I positioned the menu as fixed in mobile version so I could make it occupy the entire page.

position: fixed;
bottom: 0;
top: 0;
left: 0;
width: 40%;
Codecygen
  • 121
  • 1
  • 1
  • 10