Issue with links in Nav

In a higher resolution, the nav bar looks like fine. Unfortunately I can’t provide the image because this site is not allowing me to post more than 1 .

But in a lower resolution of the same, the links are on top of each other like so2q

I think the borders are causing the issue. Here is the source code:

<!DOCTYPE html>
<html>
<head>
  <title> My Website</title>
  <link rel="stylesheet" type="text/css" href="website.css">
</head>

<body>
	<header id="main-header">
	  <div class="container">
	    <h1>My Website</h1>
	  </div>	
	</header>
	
	<nav id="navbar">
	  <div class="container">
		<ul>
		  <li><a href="#">Home</a></li>
		  <li><a href="#">About</a></li>
		  <li><a href="#">Services</a></li>
		  <li><a href="#">Contact</a></li>
		  <li><a href="#">Copyright</a></li>
	  </div>	
	</nav>
body{
	background-color:#f4f4f4;
	color:#555;
	font-family:Arial;
	font-size:16px;
	line-height:1.6em;
	margin:0;
}

.container{
	width:80%;
	margin:auto;
	overflow:hidden;	
}

#main-header{
	background-color:coral;
	color:#fff;
}

#navbar{
	background-color:#333;
	color:#fff;
}

#navbar ul{
	list-style:none;
	padding:0;
}

#navbar li{
	display:inline;
}

#navbar a{
	color:#fff;
	text-decoration:none;
	font-size:18px;
	padding:10px;
	margin:50px;
	transition:0.3s;
	background-color:#333;
	border-radius:15px;
	border:3px solid white;	
}

Thanks!

Hi there akhillav,

and a warm welcome to these forums. :winky:

Please supply a link to the site in question and/or
all the relevant HTML and CSS code.

coothead

I have updated the post with relevant HTML and CSS

Hi there akhillav,

here is how I would code it…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    margin: 0;
    background-color: #f4f4f4;
    font: 100% / 162% arial, helvetica, sans-serif;
    color:#555;
 }

h1 {
   margin: 0;
   padding: 0.7em 0 0.7em 7%;
	background-color: #ff7f50;
	color: #fff;
 }

#nav{
    background-color: #333;
	 color: #fff;
 }

#nav{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0;
	 padding: 0.25em 0;
	 list-style: none;
 }

#nav li {
	margin: 0.25em 1em;
 }

#nav a {
    display: block;
	 padding: 0.56em;
	 border: 0.17em solid #fff;
	 border-radius: 0.83em;
	 font-size: 1.125em;
	 color: #fff;
	 text-decoration: none;
	 background-color: #333;
	 transition: 0.3s;	
 }
</style>

</head>
<body> 

<h1>My Website</h1>

 <ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Copyright</a></li>
 </ul>	

</body>
</html>

As you will notice, I am not very fond of using surplus elements. :winky:

coohead

4 Likes

The reason is that inline elements do not honor vertical margins, which an anchor is by default.

You can change your anchors to blocks or move your margin to the li while setting it as a block / inline-block.

#navbar li{
 display:inline-block;
 margin:50px;
}

#navbar a{
	color:#fff;
	text-decoration:none;
	font-size:18px;
	padding:10px;
	/*margin:50px;*/
	transition:0.3s;
	background-color:#333;
	border-radius:15px;
	border:3px solid white;
}

EDIT:
Of course coothead has shown a modern method using flex. I was explaining what was happening with your code.

3 Likes

Vertical padding on inline elements will bleed out of the line height for the current line and overlap subsequent lines. That’s why your elements overlap when they wrap

You need to change the display of the element from inline to a block display (such as inline-block, block or one of the many other ‘block’ formats as required by the design - such as using flex as in @coothead method).

Vertical margins are also ignored for inline elements.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.