How to add spacing in NAVIGATION bar?

Question

How to add spacing in NAVIGATION bar?

2.4k views Asked by Rohit Soni At 09 December 2024 at 09:17

How can I add spacing in the navigation bar? here's the code I have written btw I am still a noob learning coding so yeah!

<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: #FFFFFFF;
}

.topnav a {
  float: left;
  color: #000000;
  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: #FFFFFFF;
  color: black;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>

  <a href="men.html">Men</a>
  
  <a href="women.html">Women</a>
  <a href="our-materials.html">Our Materials</a>
  <a href="stores.html">Stores</a>

</div>

<div style="padding-left:10px">
  <h2>Top Navigation Example</h2>
  <p>Some content..</p>
</div>

Please provide exact details I should do and better it be in html

Original Q&A

There are 2 answers

**Adrian Cobo** · Answer 1 · 2020-08-29T15:01:45+00:00

You can add space un numerous ways. I advice you to delete the float:left; because is not the current best way to do this.

In spite of you can add display: inline-block to the elements or put display: flex to the topnav class.

If you user inline-block you will be able to add margin to the a, if you use flex type you can read more about on https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I hope you understand and learn more about flex and the display option.

**Nick** · Answer 2 · 2020-08-29T15:10:16+00:00

The best case would be to give your a class or id and edit a child element. I did margin: 0; to eliminate any margin, and then declare the margin-right: 5px; this way it will all fall inline neatly without any weird gaps. In your CSS you can also add text-transform: uppercase; to get your navigation to be all caps.

As of Bootstrap 4, you can use the spacing utilities. Add for instance px-2 in the classes of the nav-item to increase the padding.

You can change this in your CSS with the property padding:

.navbar-nav > li{
  padding-left:30px;
  padding-right:30px;
}

Also, you can set margin

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}

TechQA.

How to add spacing in NAVIGATION bar?

There are 2 answers

Related Questions in HTML

Related Questions in NAVIGATION

Popular Questions

Popular Tags

Trending Questions