Streaming live at 10am (PST)

Navbar links have some kind of focus on hover and I dont want it


#1

My navbar links have a hover color and everytime I hover over a nav item, it pulls my nav item text upwards and gives it like a focus effect which I do not want and i did not add that. How do I get rid of it? I just want a normal navbar with normal hovering color over it without some fancy focus. I need the nav item text to stay in the center when hovering over items.


Here is my public share link: https://webflow.com/design/1800days-83dc84
(how to access public share link)


#2

Hi @gschultz glad you could join the community :smiley:

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! :slightly_smiling:


#3

Here is a screenshot, you can see that when I hover over a nav item it pushes the text upward and I have no idea why because I never changed anyhting like that. Is there any kind of code editor within webflow that I can use instead of this clunky UI? I just tried uploading a screenshot but it timed out at 100% of the upload! Seriously this is becoming a bad experience and it sucks because I can see how this webflow would work awesome!


#4

You can put custom code in but it won't show in the designer tool, but it will execute in the published site: http://help.webflow.com/site-settings/custom-code

Sorry about that :frowning: This forum is on a completely different platform (discourse), so I'm not sure why that is happening.

Can you at least share with community your read-only link so we could look into the issue?

http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link


#5

Here is my read only link https://preview.webflow.com/preview/1800days-83dc84?preview=8edf72abc4941c0a0a52475d095b6e82


#6

thanks

try going to your nav element's states:

then remove all the top and bottom paddings

For more information on this, please refer to this article:
http://help.webflow.com/article/how-do-you-change-the-hover-pressed-and-focused-pseudo-class-selectors-styles


#7

I dont understand what you mean? I havent done anything, All I did was change the background color on hover and after I did that, my nav items got all messed up and webflow automatically added this focus or whatever that is that it does when I hover over an item now.


#8

see I dont have any paddings on them or anything, but as you can see, when you hover on a nav item, the actual text moves up for some reason. How do I get rid of this? I just want a normal hover effect.


#9

Hi @gschultz

I think @PixelGeek meant that you have to remove all changes that you did to padding in the hover state.
Here is video how to do this

Regards,
Anna


#10

Okay I got that, but now what about the submenu? Now when I hover over a submenu item, the item focuses or "zooms in" I dont want it to zoom in, im sorry just this whole webflow experience is by far a good one.


#11

1) Pick the 1st link (it is dropdown)
2) Go to settings panel and click "Open menu"

3)Pick one of the links inside the Dropdown list
4) go to hover state and REMOVE all changes in padding and margin for this link (same as I did in the video)

It will solve your problem.

Regards,
Anna


#12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.