CODEWITHSUNDEEP
javascripthtmlcssheader
SM079
SM079

Reputation: 713

CSS: Menu alignment in header using CSS

I am trying to make a header. I have four menu items and i need them to be aligned across the menu with equal intervals.

JSFiddlelink <script async src="//jsfiddle.net/SM079/xdhu0kr2/1/embed/"></script>

  1. header to be 90% in screen as center aligned.
  2. header links need to be align at equal distance irrespective of screen resolution.

Please help

Upvotes: 1

Views: 104

Answers (4)

user16347286
user16347286

Reputation: 

<!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: black;
  
  padding:0 5%;/*It is better to use container*/
  display:flex;
  justify-content:space-evenly;
}

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

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

</body>
</html>

Upvotes: 1

Birdsharna
Birdsharna

Reputation: 51

To center the text in the screen use this

.topnav {
  overflow: hidden;
  background-color: black;
  justify-content: center;
  align-items: center;
  display: flex;
}

Then to configurate the space between the header links you can use this

a{
  margin-left: 2rem;
}

Upvotes: 1

Ankit Saxena
Ankit Saxena

Reputation: 1197

Use can use the flexbox property to align the menu items across the menu with equal intervals. Just need to change the css in the .topnav class. Like this:


.topnav {
  overflow: hidden;
  background-color: black;
  display:flex;
  justify-content : space-between;
}

Working code: 

<!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: black;
      display: flex;
      justify-content: space-between;
    }
    
    .topnav a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .topnav a.active {
      background-color: #04AA6D;
      color: white;
    }
  </style>
</head>

<body>

  <div class="topnav">
    <a class="active" href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>


</body>

</html>
Hope that's how you wanted it to look.

Upvotes: 1

ife
ife

Reputation: 33

you can add this to the .topnav class

  display: flex;
align-items: center;
justify-content: center;

Upvotes: 1

Related Questions