How can I move the menu tag out of the header and insert it in another place in the HTML?


abduct

So I have a hamburger menu on mobile in the header. On desktop, things change, with the menu to the left of the main content, below the header. Is there a (JavaScript) way to use the existing markup, i.e. move the nav tag and its content outside of #overlay and put it in a side tag? Or is duplicating the menu marker the only way?

<header>
   <div id="overlay">
        <nav id="navbar">
            
            <ul class="menu">
                <li class="item-group">
                    <a href="index.html">The Story.</a>
                </li>

                <li class="item-group">
                    <a href="everyday-life.html">Everyday Life</a>
                </li>
   </div>
</header>

<aside> Side menu on desktop </aside>

enter image description here

54ka

How the code works

A function has been added to the body that listens to resize the screen width onresize="navigationFunc()".

To display the page in the correct position when we reload the page onload="navigationFunc()".

When the width is less than 1000px (can be changed in code) . Move navigation in element with id#mobile

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body onresize="navigationFunc()" onload="navigationFunc()">

    <div id="desktop">
        <div id="navigation">
            Lorem ipsum dolor sit amet
        </div>   
    </div>

    <div id="mobile">
    </div>

    <script>
        var nav = document.getElementById('navigation');
        var dsk = document.getElementById('desktop');
        var mob = document.getElementById('mobile');

        function navigationFunc() {
            var w = window.outerWidth;
            if (w < 1000) {
                // mob.appendChild(nav); // ADD LAST
                mob.insertBefore(nav, mob.childNodes[0]); // ADD FIRST
            } else {
                // dsk.appendChild(nav); // ADD LAST
                dsk.insertBefore(nav, dsk.childNodes[0]); // ADD FIRST
            }
        }
    </script>

</body>
</html>

Related


How can I move my header logo above the menu items?

Remo I'm trying to optimize my shopify store for mobile devices. But I'm running into a problem that I can't solve. My mobile version now looks like this: I want to make the logo bigger, but I also need to show other icons. I'm wondering if it's possible to mo

How can I place a menu on the entire page using HTML and CSS?

Xiaomi Anthony I'm just getting started with web languages (HTML, CSS) and I'm creating my homepage. I found the template html horizontal menu that I want to apply to the page. Unfortunately, I didn't come to modify it because it works for all widths of my pag

How to place HTML tag into another HTML tag using Javascript

May 1903 I want to put elements into elements using Javascript<div id="all_content"><sector id="all_field"> <section id="all_field"></section> <div id="all_content"> <h1>---&nbsp;&nbsp;Meeting Room Booking&nbsp;&nbsp;---</h1> <fieldset class="box"><leg

How to place HTML tag into another HTML tag using Javascript

May 1903 I want to put elements into elements using Javascript<div id="all_content"><sector id="all_field"> <section id="all_field"></section> <div id="all_content"> <h1>---&nbsp;&nbsp;Meeting Room Booking&nbsp;&nbsp;---</h1> <fieldset class="box"><leg

How can I move this navbar menu to the right?

divsince_1999 How can I move this navbar menu to the right? I can't move this navbar menu on the right. I tried float the correct way. What is the best solution? I tried many ways with no result, thank goodness can you help me with my problem! this is my code

How can I place my html content scroll below my header element?

username I have an image to use as a header under the head element, but the rest of the content is not below. Here is my CSS header, #header { left:0px; width:100%; top:0px; position:fixed; } html code for the header, <head> <title>MyWebPage</title> <

How can I place my html content scroll below my header element?

367 I have an image under the head element to use as a header, but the rest of the content doesn't flow below. Here is my CSS header, #header { left:0px; width:100%; top:0px; position:fixed; } html code for the header, <head> <title>MyWebPage</title>

How can I place my html content scroll below my header element?

367 I have an image under the head element to use as a header, but the rest of the content doesn't flow below. Here is my CSS header, #header { left:0px; width:100%; top:0px; position:fixed; } html code for the header, <head> <title>MyWebPage</title>

How can I remove the border of the <header> tag?

crocodile skin Here is my code: HTML <!DOCTYPE html> <html> <body> <header> </header> </body> </html> CSS header { background-color: gray; } and how it looks in the browser: So my question is: how can I remove these white borders?

How can I remove the border of the <header> tag?

crocodile skin Here is my code: HTML <!DOCTYPE html> <html> <body> <header> </header> </body> </html> CSS header { background-color: gray; } and how it looks in the browser: So my question is: how can I remove these white borders?

How can I move the view to another item?

Greg Gumm I have a standard MVC 5 project created from a VS template. Now I want to move the account related controllers and views to a different project so that it becomes a module. (This way it can be easily included/excluded from the site.) I've been able t

How can I move the window to another monitor?

Peter I'm using Kill Potion on multiple monitors. Currently, if I close its current monitor ( xrandr --output ... --off) and then ctrl/t+num on the monitor I want to use , that's the only way I can find to move the window to another monitor . However, this is

How can I place this text in HTML?

Chirozan In the screenshot below, I want to add a href that redirects to a specific link between the refreshbutton and the Need Help?button , however, when I use it <span>, it doesn't work. It puts it on the next line. what should I do? The HTML code of the sc