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