- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
My website has a nav bar at the top of the page that spans horizontally 100% the width of the screen. I have buttons on the left-hand side (i.e. Home, About, Blog, Contact) and a Login button on the far-right hand-side of the screen. I am trying to center a particular button in the middle of the this nav bar (let’s call it "X"). I want it to look something like this:
<–Home–About–Blog–Contact
I have successfully got button X to be centered, however, in doing so this button seems to affect the functionality of the other buttons on the nav bar in such a way that I can no longer rollover or click on any of the other nav bar links on the left or right-hand side.
Here is my CSS for button X, maybe you can recommend a better way of accomplishing this centering, so that I do not lose the functionality of the other buttons.
#buttonX {
font-size: 1.3em;
position: fixed;
text-align: center;
top: 0;
width:100%;
margin: 0 auto;
list-style: none;
line-height: 2em;
height: 100%;
}
It looks like you are stretching #buttonX over all of the other links… That could definitely "cover up" clickable links…
I would use absolute positioning to make just the link stay in the middle… something like this: