Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Centering Content Within a Fixed Navigation Menu

Status
Not open for further replies.
Krus1972

Krus1972

Programmer
Mar 18, 2004
145
US
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:

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
 
Sort by date Sort by votes
1. Your CSS is doing its best to do exactly the opposite of what you want it to do. If you want the inner <a> to be centered, why are you floating them left then? floating something to the left, means its pushed to the left. If you want it centered then tell it to be centered. Give the navbar the text-align property set to centered, and then don't float all your links to the left. For the form just make it an inline-block so it follows the text alignment,

Code: 
<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 */
[indent][b]text-align:center;[/b][/indent]
}

/* Links inside the navbar */
.navbar a {
    [s]float: left;[/s]
    [s]display: block;[/s]
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

[b].navbar form
{
[indent][/indent]display:inline-block;
}[/b]

</style>

2. Do you want the logo to be centered along with the links and the search field?

If so just add a <span></span> with the text for it.

Code: 
<div class="navbar">
[indent][b]<span>LOGO</span>[/b][/indent]
  <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>

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Upvote 0 Downvote
Do not use absolute positioning for a start, once you do that you have lost control of how the element will behave at different screen sizes, because you have told it to be absolutely in one place

You can see it here:
Click to expand...
Actually I can't. :)

I get blocked by SiteLock for using a proxy that I'm not.

The proxy IP that I'm not using is US based and operated by Incapsula Operations out of Redwood Shores, California, so I am guessing that you are using a CDN/Load Balancer that needs some reconfiguring, as the "proxy" IP is the same as the IP assigned to your hostname, (199.83.131.107)






Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.
 
Upvote 0 Downvote
Yeah, I can't access the site either.



No absolute positioning is being used. Only fixed which makes sense for how they want the navbar to behave.

It's more that the internal elements need adjusting to display as expected.





----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Upvote 0 Downvote
That is interesting. I am using Sitelock firewall on the website. Right now it is set to allow only U.S.A. and Canada based traffic. If you are located outside of these regions even if you are using a proxy, you won;t be able to access it. Where is vacunita and ChrisHirst located? If you guys are located within the U.S. and you are not able to access the site, could you send me a screenshot of what you are looking at?

Thanks.

 
Upvote 0 Downvote
position: fixed; is still an absolute setting with respect to the document flow.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.
 
Upvote 0 Downvote
[URL unfurl="true" said:
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning[/URL]]Fixed positioning is really just a specialized form of absolute positioning;
Click to expand...

AND; I'm in the UK.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.
 
Upvote 0 Downvote
position: fixed; is still an absolute setting with respect to the document flow.
Click to expand...

Yes, but it behaves differently. Absolute positioned elements will still scroll with the screen. Fixed elements will not and will remain where they are regardless.

And based on the description, a fixed element makes sense to get the desired effect.



As to location, I'm currently in Mexico.

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Upvote 0 Downvote
Use box-shadow:

Code: 
.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 */
[indent]box-shadow:2px 3px 4px rgba(30,30,30,0.8)[/indent]
}




----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Upvote 0 Downvote
border-style: outset;



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
560
pmonett
pmonett
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
530
3esolar
3
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
456
PeDa
PeDa
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
160
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
911
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top