Menu hover effect causes unwanted movement

[NReed253]

Hello, I am a new coder so forgive me if this is a simple issue. I have googled my issue numerous times and I cant find exactly what Im looking for. Im guessing its because I do not have the correct terminology to find my answer…

Anyways.. I want to include a hover effect for each of my menu items. When I hover over each item I want the text to be enlarged (120%) and the I want a colored box to be shown. I also want the hover box to be wider and taller than my text. I got all of that to work. But my problem is that when I hover over each item, the padding causes the other menu items to move over and also the menu bar to increase in height. I want everything else to stay still while I hover, just the text of the item Im hovering on to be enlarged.

Here is my code that I am working with:
http://codepen.io/Nreed253/pen/FmzsA

Any tips?

Thanks a bunch!

[Senff]

You’ll have to make sure that the hoverable item has position:absolute;.

Items with absolute positioning won’t have any effect on other elements on the page, so their size/position won’t disrupt other items.

But, in order to make that work, the parent of the hoverable items has to have position:relative; so you can position properly. Check out this 6-year old (but still relevant) article how that works: https://css-tricks.com/absolute-positioning-inside-relative-positioning/

[NReed253]

@Senff, So I am still trying to get the terminology down.. What do you mean the “parent of the hoverable item”? Is that the .menu ul?

In my code, I put the position: absolute; line in the li and the position: relative; in the .menu ul but that didnt work and when I tried to put the position: relative; in the a:hover section it just freaked out.

I think I understand the absolute/relative concept, but Im not sure where to incorporate it in my code to make it work as I want it to.

[NReed253]

@Senff, This is what I did and The other menu items are still moving out of the way… Im guessing I just wrote the new lines in the wrong place?

On another note, I saw in another thread where you explained how to have a sticky menu after scrolling. I incorporated the JS that you posted but Im not sure why its not working. I am using the tag .menu ul and I changed the Js to incorporate that instead of ‘.menu’. Is that not right? Im having a hard time with understanding JS so Im sorry if thats totally wrong.

http://codepen.io/Nreed253/pen/FmzsA

[NReed253]

@wolfcry911 THANK YOU! I had no idea that you had to actually load the Jquery library like that… OOPS! Is there a way to make the menu fixed to be flush with the top of the screen instead of having the slight gap?

On the position: absolute, if I put a semi-colon after the absolute instead of a comma it made the menu all funky and mess up, but it worked if I left the comma after absolute like this:

position: absolute, top 20px; left 20px;

Thats what you meant right?

If I want to increase the font size when I hover, the menu bar increases its height. How can I fix this? I thought the absolute and relative positioning would fix this..

Also, How can I clean up my code and make it more efficient?

[Author]

Posts