Remove Overflow: scroll, Fix Transition var, Add .link-text transition #28
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.navbar class had a constant transition value, thus we weren't able to change that simply by modifying the previously declared --transition-speed variable
Fixing .link-text class to make the text appear gradually together to the navbar by the use of opacity, visibility and transition for such properties. I switched to display: inline, it was pointless to set display: none by default since the text wouldn't appear no matter what in large screens given the fact that the '.navbar when not :hover' wouldn't allow it to be seen with its 5rem width. I added the 'display: none' property to .link-text while in small screens to avoid the menu layout to be broken by such changes.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi!
I tried to fix some project issues.
Honestly I don't know why you merged to master a commit where overflow: scroll was applied to '.navbar', it literally broke the navbar layout as you can see in the gif.
Secondly I fixed the transition time in .navbar since it was set as a constant of 600ms, I switched the value with the variable we previously declared at the start of the .css document.
Lastly, I made sure that the .link-text appears only when it doesn't exceed the navbar border while it's expanding on hover by using a combination of CSS properties like visibility, opacity and transition for both of them.