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
~MARSMAN~
~MARSMAN~β€’2y ago
Check if you have any overflow-y: hidden; set for your header or the links themselves
Lord Of Insanity
Lord Of Insanityβ€’2y ago
Is there supposed to be?
~MARSMAN~
~MARSMAN~β€’2y ago
No, but if there was then it's the reason it cutted off the outline from top and bottom
Lord Of Insanity
Lord Of Insanityβ€’2y ago
No there isn't
~MARSMAN~
~MARSMAN~β€’2y ago
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 ?
Lord Of Insanity
Lord Of Insanityβ€’2y ago
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.
~MARSMAN~
~MARSMAN~β€’2y ago
It did for me, here try it
Lord Of Insanity
Lord Of Insanityβ€’2y ago
Ah, I know why it didn't work, live sever wasn't running lol. Yeah I can see it works now
~MARSMAN~
~MARSMAN~β€’2y ago
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
@media screen and (max-width: 50rem)
@media screen and (max-width: 50rem)
Lord Of Insanity
Lord Of Insanityβ€’2y ago
Yeah, that looks to be working. Thanks!
~MARSMAN~
~MARSMAN~β€’2y ago
Ok great πŸ˜ΈπŸ‘
Lord Of Insanity
Lord Of Insanityβ€’2y ago
By the way, do you have any ideas for the other part of my question?
~MARSMAN~
~MARSMAN~β€’2y ago
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?
Lord Of Insanity
Lord Of Insanityβ€’2y ago
Yeah it is And I'll make the new question in a bit
~MARSMAN~
~MARSMAN~β€’2y ago
πŸ‘ Ok check the CodePen again.. In JS, see from line 24 to 41
Lord Of Insanity
Lord Of Insanityβ€’2y ago
Ah, perfect! Thank you so much!
~MARSMAN~
~MARSMAN~β€’2y ago
You're welcome πŸ‘ŒπŸ‘Ύ
Lord Of Insanity
Lord Of Insanityβ€’2y ago
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.
~MARSMAN~
~MARSMAN~β€’2y ago
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
Lord Of Insanity
Lord Of Insanityβ€’2y ago
Yeah it happens there too
~MARSMAN~
~MARSMAN~β€’2y ago
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.
Lord Of Insanity
Lord Of Insanityβ€’2y ago
Huh, well that's annoying
~MARSMAN~
~MARSMAN~β€’2y ago
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.
Lord Of Insanity
Lord Of Insanityβ€’2y ago
Yep that works
~MARSMAN~
~MARSMAN~β€’2y ago
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.
Lord Of Insanity
Lord Of Insanityβ€’2y ago
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
~MARSMAN~
~MARSMAN~β€’2y ago
Hmm Ok let's try combine the timeout with flag variable approach. See the CodePen again and test it out
Want results from more Discord servers?
Add your server