Untitled

<!doctype html>
    <html lang=en>
    <head>
        <meta charset=utf-8>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="./img/favicon.ico">


        <title>Study Site</title>
        <link rel="stylesheet" type="text/css" href="./css/default.css">

    </head>

    <body>
    <nav>
    <div class="row" style="border:2px solid red;">
    <div id="navimport">Loading Nav Bar</div>
    </div>
    </nav>

    <main role="main" class="container">

        <div id="sidebar">
            Side Bar
        </div>

        <div id="mainbody">
            Main Body
        </div>

    </main> <!-- container -->

    </body>

    <script>
    window.onload = function(){
        file="http://localhost/learning/navbar.html";
        x = new XMLHttpRequest;
        elem = document.getElementById("navimport");

        //Set up the call back
         x.onreadystatechange = function() {
            if (this.readyState == 4) {
              if (this.status == 200) {elem.outerHTML =x.responseText;}    //{elem.innerHTML = x.responseText;  elem.Textcontent = x.responseText;}
              if (this.status == 404) {elem.innerHTML = "Page not found.";}
              /*remove the attribute, and call this function once more:*/
              //elmnt.removeAttribute("w3-include-html");
              //includeHTML();
            }
          }

        x.open("GET", file, true);
        x.send();
    }

    </script>
    </html>

.row{
        width:100%;
        }


    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default */

       #sidebar{
            width:100%;
            float:left;
            border:1px solid blue;
       }
       #mainbody{
            width:100%;
            border: 1px solid green;
            float:left;
       }


    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {
       #sidebar{
            width:24%;
            float:right;
       }
       #mainbody{
            width:74%;
            border: 1px solid blue;

       }
     }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: 992px) {
       #sidebar{

       }
       #mainbody{
            border: 1px solid orange;
       }
     }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {

     }

<style>
        .navul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }


    .navul li {
        float:left;
    }

    .navul li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }


    /* Change the link color on hover */
    .navul li a:hover {
        background-color: #555;
        color: white;
    }

    .active {
        background-color: #4CAF50;
        color: white;
    }
    </style>
    <div style="width:100%;">
    <ul class="navul">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>