In a navigation bar how to give space between the inline list

HTML-CSS Conversations
,
#1

Hi iam from FSR150323 this batch . I need to give space between list items

1 Like
#2

select the li element and give padding

1 Like
#3

i have another doubt the navigation bar need to stick with the head part of the browser how we can do it

#4

@abeltjohn
To make the navigation bar stick to the top of the browser window as the user scrolls down, you can use CSS positioning and the position: fixed property.

You can refer this:

<!DOCTYPE html>
<html>
<head>
	<style>
		/* Style the navigation bar */
		.navbar {
			background-color: #333;
			color: white;
			position: fixed; /* Make the navbar fixed */
			top: 0; /* Position it at the top of the window */
			left: 0;
			right: 0;
			padding: 10px;
		}

		/* Add some content to the page */
		.content {
			margin-top: 80px; /* Add margin to the top to make space for the navbar */
			padding: 20px;
		}
	</style>
</head>
<body>
	<!-- The navbar -->
	<div class="navbar">
		<a href="#">Home</a>
		<a href="#">About</a>
		<a href="#">Contact</a>
	</div>

	<!-- The content of the page -->
	<div class="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus mi eu nibh euismod, vel dignissim odio interdum. Donec ultrices, dolor non venenatis mattis, dolor arcu placerat ipsum, id dignissim libero dolor sed sapien. Nam vulputate ipsum eget nisl euismod vehicula. Sed vestibulum scelerisque velit, at cursus sapien pharetra sed. Suspendisse ac nunc vitae massa pretium sagittis ac eu tellus. </p>
		<p>Maecenas interdum nisl sit amet urna rhoncus, non suscipit sapien volutpat. Maecenas ac volutpat dolor, quis interdum elit. Nunc placerat dolor eget augue scelerisque lobortis. Sed congue erat quis nibh faucibus bibendum. Donec euismod eget lacus ut feugiat. Integer eu nisi vitae urna ullamcorper elementum. Fusce at justo quis turpis dapibus consectetur. Integer vel nulla vitae arcu hendrerit euismod. Donec dictum velit vel erat ultrices, eu bibendum elit lacinia. Aenean scelerisque odio vel finibus tristique. </p>
	</div>
</body>
</html>
1 Like
#5

not about the postion, my postion is relative, my problem is i have a navbar .it has a background color .problem is show a space on the top of navbar means the body background is showing

#6

@abeltjohn If your navigation bar has a background color and you are seeing a space on the top of the navigation bar where the body background is showing, it is likely that the margin or padding of either the navigation bar or the body element is causing this issue.

To fix this, you can set the margin and padding of both elements to 0. Here’s an example CSS code that should achieve this:

body {
  margin: 0;
  padding: 0;
}

nav {
  position: relative;
  margin: 0;
  padding: 0;
  background-color: #yourcolor;
  /* Other CSS styles for your navigation bar */
}