I have created a fixed navigation bar that remains at the top of the screen when the user scrolls through content on a webpage. The navigation bar is very similar to what LinkedIn uses and very similar to what Facebook uses at the top of the screen. You can see it here:
I am having a difficult time doing the following:
1.) I am trying to center the content (i.e. the links, form inputs, etc....) horizontally within the navigation bar. No matter what size the window is, the content needs to be centered.
2.) I am trying to insert a logo to the left of all the content, within the navigation bar, very similar to how LinkedIn has. The logo will be either an image or plain text.
I am still a bit new at CSS and I would appreciate any help anyone can provide. Here is my code:
Thanks again for any help
I am having a difficult time doing the following:
1.) I am trying to center the content (i.e. the links, form inputs, etc....) horizontally within the navigation bar. No matter what size the window is, the content needs to be centered.
2.) I am trying to insert a logo to the left of all the content, within the navigation bar, very similar to how LinkedIn has. The logo will be either an image or plain text.
I am still a bit new at CSS and I would appreciate any help anyone can provide. Here is my code:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Title Here</title>
<style>
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #5F5F5F;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#contact">Contact</a>
<a href="#contact">Contact</a>
<a href="#contact">Contact</a>
<form style="margin-top: 12px;">
<input type="text" placeholder="Search">
<input type="submit" value="Go">
</form>
</div>
</body>
</html>
Thanks again for any help