INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Centering Content Within a Fixed Navigation Menu

Centering Content Within a Fixed Navigation Menu

(OP)
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: http://product.info/Top_Bar.asp

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


RE: Centering Content Within a Fixed Navigation Menu

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 */
text-align:center;
} /* Links inside the navbar */ .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar form {
display:inline-block; }
</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">
<span>LOGO</span>
<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

RE: Centering Content Within a Fixed Navigation Menu

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

Quote:

You can see it here: http://product.info/Top_Bar.asp
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.

RE: Centering Content Within a Fixed Navigation Menu

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

RE: Centering Content Within a Fixed Navigation Menu

(OP)
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.

RE: Centering Content Within a Fixed Navigation Menu

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.

RE: Centering Content Within a Fixed Navigation Menu

Quote (https://www.w3.org/wiki/CSS_absolute_and_fixed_pos...)

Fixed positioning is really just a specialized form of absolute positioning;

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.

RE: Centering Content Within a Fixed Navigation Menu

Quote:


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

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

RE: Centering Content Within a Fixed Navigation Menu

(OP)
Do you guys know how to give the same navbar a raised effect? Specifically, I would like to place the same gradient shadow along the bottom border as shown on the navbar on this page:

https://www.w3schools.com/bootstrap/bootstrap_navb...


RE: Centering Content Within a Fixed Navigation Menu

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

https://www.w3schools.com/cssref/css3_pr_box-shado...

----------------------------------
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

RE: Centering Content Within a Fixed Navigation Menu

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.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close