Outline gets cutoff when focused
(CodePen for context: https://codepen.io/BravoLima2k4/pen/qBJNKry)
Whenever I focus on a nav link the outline gets cutoff on the top, bottom and on the left on the last link.
Also I have another question, and I didn't want to unnecessarily clutter the channel:
The dropdown in my nav needs to open when you focus on the toggle, stay open when focused on a link in the dropdown, and to close when you focus to the next link in the nav. I've tried to use "e.key === "enter" ", and activeElement to do this, but It didn't work.
Does anyone know how to solve either of these problems?
Thanks.
28 Replies
Check if you have any overflow-y: hidden; set for your header or the links themselves
Is there supposed to be?
No, but if there was then it's the reason it cutted off the outline from top and bottom
No there isn't
Even if you set overflow to any option, it will cut off the outline.
Which is what's happening in your case.
If you removed the
overflow-y: hidden from your
.primary-navigation[data-visible="false"] at line 79
And removed overflow-y: scroll from your
.primary-navigation at line 54
Then the outline will appear.
But that will mess with what you wanted it to do
can you tell me why you're using overflow-y ?When the screen size gets smaller than 50rem, the nav collapses into a hidden menu. The overflow-y is on there so when the menu is closed you can scroll on the page normally, but when you open the menu you can't scroll on the main content of the page, but you can scroll on the menu when you get to smaller screen sizes. I removed the aforementioned overflow-y occurrences, but it didn't solve the issue.
It did for me, here try it
Ah, I know why it didn't work, live sever wasn't running lol. Yeah I can see it works now
Oh ok
For the overflow, maybe add the Line 79 into a media query?
I don't see anything for small screen, so yeah try taking the line 79 into your
Yeah, that looks to be working. Thanks!
Ok great 😸👍
By the way, do you have any ideas for the other part of my question?
I think it's better to make a new post for it for future readers 😊
I'll take a look at it in a few, it's in the same JS in your CodePen right?
Yeah it is
And I'll make the new question in a bit
👍
Ok check the CodePen again..
In JS, see from line 24 to 41
Ah, perfect! Thank you so much!
You're welcome 👌👾
Hmm, there is a little problem though. When you click on the dropdown toggle it like flicks open for a moment then closes, but when you click it a second time it opens normally.
I can't open the video
But yeah I saw it on the CodePen 🤔
It's weird, can you run the code in your local server and see
Yeah it happens there too
Do you think the
focus and click events on the dropdownToggle are interfering with each other at first? 🤔
Yeah i believe they are, coz the click event toggles the classes while the focus only adds the classes.
I removed the focus event and the glitch isn't happening anymore.Huh, well that's annoying
I think a timeout for the focus event ( line 39 ) will help fix it, i added a timeout of 100ms.
Test the dropdown again and see if the glitch is still occuring.
For me it isn't.
Yep that works
Awesome, try to lower the timeout time, test multiple values and set it to the Lowest possible value so the user doesn't have to wait 100ms for the dropdown to expand.
Ok it looks like about 90ms is the possible lowest delay, before client latency has an effect
actually it appears that it really does depend on client latency, in codepen I could get away with about 90ms, but on my live server even that isn't long enough
Hmm
Ok let's try combine the timeout with flag variable approach.
See the CodePen again and test it out