Html - How to center responsive menu perfectly in this W3 example?

HelloWorldCpp
July 8, 2023
144 views
2 votes
3 Answers

can someone please help me center the responsive menu in this W3 example?

What I’m looking to do is:

Desktop: The div and the menu inside it should be centered perfectly in the horizontal-middle of the page, vertically-on-top, with the menu items going from left to right.

Mobile: The "Menu" button should be in the horizontal-center, and each menu item should also be in the horizontal-center, going from top to bottom. Also, I would like the menu items to only be visible in the mobile view when the menu is open, instead of always displaying something like "home" on top. On top, it should just be the "MENU" text, in the center, nothing else.

No matter what I do, I can only get the menu-items go center perfectly, nothing else… what am I missing? I’m very new to HTML/CSS/JS so please go easy on me 🙂

The original example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  }

.topnav {
 overflow: hidden;
 background-color: #333;
 }

 .topnav a {
 float: left;
 display: block;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
 }

 .topnav a:hover {
 background-color: #ddd;
 color: black;
 }

.topnav a.active {
 background-color: #04AA6D;
 color: white;
}

.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
 float: right;
 display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
 position: absolute;
 right: 0;
 top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
}
</style>

</head>
<body>

<div class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">MENU</a>
</div>

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

</body>
</html>

Answers

You can use flex for centering your nav links and also if you don’t want to see the home you need to remove :not(:first-child) from this part of the code:

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
 float: right;
 display: block;
}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  }

.topnav {
 overflow: hidden;
 background-color: #333;
 display:flex;
 justify-content:center;
 }

 .topnav a {
 float: left;
 display: block;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
 }

 .topnav a:hover {
 background-color: #ddd;
 color: black;
 }

.topnav a.active {
 background-color: #04AA6D;
 color: white;
}

.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a{display: none;}
.topnav a.icon {
 float: right;
 display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
 position: absolute;
 right: 0;
 top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
}
</style>

</head>
<body>

<div class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">MENU</a>
</div>

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

</body>
</html>

The menu items are centered horizontally and vertically on the page, adapting to the screen size and orientation. The "Menu" button functions as intended, revealing the hidden menu items when clicked in the mobile view.

<!DOCTYPE html>
        <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
        
            <style>
                body {
                    margin: 0;
                    font-family: Arial, Helvetica, sans-serif;
                }
        
                .topnav {
                    overflow: hidden;
                    background-color: #333;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
        
                .menu-items {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
        
                .topnav a {
                    display: block;
                    color: #f2f2f2;
                    text-align: center;
                    padding: 14px 16px;
                    text-decoration: none;
                    font-size: 17px;
                }
        
                .topnav a:hover {
                    background-color: #ddd;
                    color: black;
                }
        
                .topnav a.active {
                    background-color: #04AA6D;
                    color: white;
                }
        
                .topnav a.icon {
                    display: none;
                }
        
                @media screen and (max-width: 600px) {
                    .topnav a:not(:first-child),
                    .menu-items {
                        display: none;
                    }
        
                    .topnav a.icon {
                        float: none;
                        display: block;
                    }
        
                    .topnav.responsive {
                        position: relative;
                    }
        
                    .topnav.responsive .icon {
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
        
                    .topnav.responsive a {
                        float: none;
                        display: block;
                        text-align: center;
                    }
                }
            </style>
        
        </head>
        <body>
        
        <div class="topnav" id="myTopnav">
            <a href="#home" class="active">Home</a>
            <div class="menu-items">
                <a href="#news">News</a>
                <a href="#contact">Contact</a>
                <a href="#about">About</a>
            </div>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">MENU</a>
        </div>
        
        <script>
            function myFunction() {
                var x = document.getElementById("myTopnav");
                if (x.className === "topnav") {
                    x.className += " responsive";
                } else {
                    x.className = "topnav";
                }
            }
        </script>
        
        </body>
        </html>

First of all, you can use display: grid as I used in the below code snippet (or even display:flex!) to position almost anything in the center. To position the menu button in the horizontal-center, I put display: grid; on the navbar element and then put justify-self: center on the menu button, which centers itself in the horizontal-center.

Links:

Then in this part of the styles,

.topnav a:not(:first-child) {display: none;}

I removed the :not(:first-child), which just applies the display: none; style to all of the elements except the first element of .topnav.

Also to make the menu button still appear in the center even when the menu is opened (in mobile), I had to remove the position: absolute from this part of the styles,

.topnav.responsive .icon {
 position: absolute;
 right: 0;
 top: 0;
}

and also put the menu button / element as the first element inside the navbar, so that the menu button would still appear at the top of the screen.

Note: In the below snippet of code, I have commented on the lines on which I removed or added something.

Example:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .topnav {
      overflow: hidden;
      background-color: #333;
    }
    
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    
    .topnav a.active {
      background-color: #04AA6D;
      color: white;
    }
    
    .topnav .icon {
      display: none;
    }
    
    @media screen and (max-width: 600px) {
      .topnav a {
        display: none;
      }
      
      .topnav a.icon { /* :not(:first-child) has been removed which makes the "home" button disappear when menu is closed*/
        /* removal of float: right; on this line */
        justify-self: center; /* addition */
        display: block;
      }
      .topnav {
        display: grid; /* addition */
      }
    }
    
    @media screen and (max-width: 600px) {
      .topnav.responsive {
        position: relative;
      }
      .topnav.responsive .icon {
        /* removal of position: absolute; on this line */
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    }
  </style>

</head>

<body>

  <div class="topnav" id="myTopnav">
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">MENU</a> <!-- Made the menu button the first element -->
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>

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

</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to center responsive menu perfectly in this W3 example?

Answers