it moves because your :hover pseudo class changes the thickness of the borders, thus causing all content below it to shift back up
To remedy the issue change this in your CSS file:
#header-menu ul.menu li:hover > a, #header-menu ul.menu a:focus, #colophon #access-footer ul.menu a:hover, #colophon #access-footer ul.menu a:focus { border-bottom: 1px solid solid #603388; border-top: 1px solid solid #603388; }
TO
#header-menu ul.menu li:hover > a, #header-menu ul.menu a:focus, #colophon #access-footer ul.menu a:hover, #colophon #access-footer ul.menu a:focus { border-bottom: 3px solid solid #603388; border-top: 3px solid solid #603388; }
I hope this helps.
Thread Starter
Lmarso
(@lmarso)
Right, but I wanted those thin borders like that. Isn’t there another way?
You want the border to remain thick (3px) on the current page, but every other menu item that you hover on you want a thin(1px) border?
Possibly add a hover psedo class to the .current-menu-item class:
example:
.current-menu-item:hover { border-top:3px solid #673695; border-bottom:3px solid #673695' }
so that when you hover on the current-menu-item there is no change, but when you hover on anything else the thin border appears.
edit: I just tried with the current-menu-item:hover, and the content still jumps a bit
Thread Starter
Lmarso
(@lmarso)
I did it! Thanks to your help…
I used your code but changed the size to 2px.
I appreciated, this thread can be closed now
Have a nice day!
Great. I’m glad that you were able to get this resolved!
Have a wonderful afternoon
