'Javascript Navbar not responsive as it should be

I tried customizing w3 school responsive navbar using CSS and JS. I wanted to add a logo and a title of the web page and then the navbar. When the webpage is maximized it works fine but when I make it smaller then the navbar part overflows and when clicked to drop down the menu the menu icon vanishes and I cant return to the original form unless refreshed code pen link

function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }

 @media screen and (max-width: 600px) {
      .topnav a:not(:first-child) {
        display: none;
      }
      .topnav a.icon {
        float: right;
        display: block;
      }
    }
    
    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    
    @media screen and (max-width: 600px) {
      .topnav.responsive {
        position: relative;
      }
      .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    }
    
    header {
      background-color: rgba(2, 13, 24, 1);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      display: flex;
      align-items: center;
      box-shadow: 0 0 25px 0 rgba(2, 13, 24, 1);
    }
    
    header * {
      display: inline;
    }
    
    img.logo {
      height: 45px;
      margin-left: 40px;
    }
    
    h6.title {
      padding: 20px;
      color: white;
      font-family: "Rubik", sans-serif;
      font-weight: 500;
      font-size: larger;
    }
    
    .topnav {
      background-color: rgba(2, 13, 24, 1);
      overflow: hidden;
    }
    
    /* Style the links inside the navigation bar */
    
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-family: "Rubik", sans-serif;
      font-weight: 400;
      font-size: medium;
    }
    
    /* Change the color of links on hover */
    
    .topnav a:hover {
      background-color: rgba(35, 58, 80, 1);
      color: white;
    }
    
    /* Add an active class to highlight the current page */
    
    .topnav a.active {
      color: rgba(219, 255, 2, 1);
    }
    
    /* Hide the link that should open and close the topnav on small screens */
    
    .topnav .icon {
      display: none;
    }
    
    body {
      margin: 0px;
      background: linear-gradient(
            to bottom,
            rgba(30, 59, 112, 0.6),
            rgba(2, 13, 24, 0.6)
          )
          no-repeat center center fixed,
        url("../Images/Background.jpg");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;
    }
    
    main {
      color: white;
    }

 <!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.0">
      <link rel="stylesheet" href="..\Css\style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
      <title>Document</title>
    </head>
    
    <body>
      <header>
        <img src="https://www.freeiconspng.com/uploads/cinema-movie-theatre-icon-2.png" class="logo">
        <h6 class="title">MoviesHub</h6>
        <div class="topnav" id="myTopnav">
          <ul>
            <li><a href="#home" class="active">Home</a></li>
            <li><a href="#news">Movies</a></li>
            <li><a href="#contact">Celebrities</a></li>
            <li> <a href="#about">About</a></li>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
              <i class="fa fa-bars"></i>
            </a>
          </ul>
        </div>
      </header>
      <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat libero eget magna commodo, quis pharetra tellus pretium. Sed viverra ante in mauris finibus dapibus. Maecenas congue dapibus nulla, eu gravida orci consequat eu. Phasellus nec nunc malesuada, aliquam massa ac, accumsan metus. Fusce sed dignissim lectus. Nunc elit tellus, sollicitudin ac accumsan ut, egestas et dui. Maecenas aliquam est a ligula scelerisque, in aliquam neque sodales. Nullam condimentum euismod dictum. Curabitur non ex elementum, pretium enim ut, ornare ipsum.</p>
      </main>
    </body>
    
    </html>

Solution 1:^[1]

Got it done by myself, I used Mediaquery to get the max width of the nav bar ( both logo and menu) bonus added jquery within script tag to change the menu icon to close icon when opened

<!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.0">
    <title>Home</title>
    <link rel="stylesheet" href="..\Css\style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="top-bar">
        <span>
            <ion-icon name="call" clasa="call"></ion-icon>
            123 456 789
        </span>
        <ul>
            <li><a href="#">
                    <ion-icon name="logo-facebook"></ion-icon>
                </a></li>
            <li><a href="#">
                    <ion-icon name="logo-twitter"></ion-icon>
                </a></li>
            <li><a href="#">
                    <ion-icon name="logo-instagram"></ion-icon>
                </a></li>
        </ul>
    </div>
    <nav>
        <div class="logo">
            <a href="#"><img src="..\Images\logo.png" alt="logo">MoviesHub</a>
        </div>
        <div class="toggle">
            <a href="#">
                <ion-icon name='menu'></ion-icon>
            </a>
        </div>
        <ul class="menu">
            <li><a href="#" class="select">Home</a></li>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $(".toggle").on("click", function() {
                if ($(".menu").hasClass("active")) {
                    $(".menu").removeClass("active");
                    $(this).find("a").html("<ion-icon name='menu'></ion-icon>");
                } else {
                    $(".menu").addClass("active");
                    $(this).find("a").html("<ion-icon name='close'></ion-icon>");
                }
            });
        });
    </script>
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>

</html>

Css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a,
a:hover {
    text-decoration: none;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 25px;
    background: rgba(32, 51, 71, 1);
}

.top-bar span {
    color: white;
    font-weight: 400;
    font-size: 12px;
}

.call ion-icon {
    position: relative;
    top: 20px;
}

.top-bar ul {
    list-style: none;
    display: flex;
}

.top-bar li {
    margin: 0px 10px;
}

.top-bar a {
    color: white;
    font-size: 15px;
}

.top-bar a:hover {
    color: rgba(2, 13, 24, 1)
}

nav {
    background: rgba(2, 13, 24, 1);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 1 25px 0 rgba(2, 13, 24, 1);
}

.logo img {
    width: 40px;
    margin-right: 10px;
}

nav a {
    color: white;
}

.menu a.select{
    color: rgba(213, 255, 0, 1);;
}

nav a:hover {
    color: rgba(213, 255, 0, 1);
}

.logo {
    flex: 1;
}

.logo a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

.logo a:hover {
    color: rgba(213, 255, 0, 1);
}

.menu {
    display: flex;
    align-items: center;
    list-style: none;
}

.menu li {
    margin: 0px 10px;
    padding: 12px 8px;
    font-size: 14px;
}

.toggle {
    font-size: 18px;
    display: none;
}

@media screen and (max-width: 600px) {
    nav {
        display: block;
        position: relative;
        padding: 15px 20px;
    }

    .menu {
        margin-top: 15px;
        display: none;
    }

    .menu.active,
    .toggle {
        display: block;
    }

    .toggle {
        position: absolute;
        top: 25px;
        right: 20px;
    }
}

body {
    background: linear-gradient(to bottom,
            rgba(30, 59, 112, 0.6),
            rgba(2, 13, 24, 0.6)) no-repeat center center fixed,
        url("../Images/Background.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    font-family: 'Rubik', sans-serif;

}

Solution 2:^[2]

if you are comfortable with meshlab you could find useful pymeshlab

https://pymeshlab.readthedocs.io

Here is a simple tutorial on how to create a mesh from just array of coords and indexes...

https://pymeshlab.readthedocs.io/en/latest/tutorials/import_mesh_from_arrays.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Hamza Hasan
Solution 2	ALoopingIcon

'Javascript Navbar not responsive as it should be

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]