Fix overlapping separator on the mobile navigation bar
Summary
The sign in button is slightly off.
Logged in | Anonymous |
---|---|
![]() |
![]() |
- Fix overlapping separator in navigation bar on the mobile.
- Align sign in button on mobile.
- Add proper spacing around sign in button.
Current | Proposed |
---|---|
![]() |
![]() |
![]() |
![]() |
Possible fixes
There're some issues related to navigation bar usability on small viewports but this one can be easily fixed by updating the sign in button styles for small viewports and the navbar padding in app/assets/stylesheets/framework/header.scss
:
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index d1ce3a582bb..d8115de5b4a 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -188,7 +188,7 @@
@include media-breakpoint-down(xs) {
display: -webkit-flex;
display: flex;
- padding-right: 10px;
+ padding-right: $gl-padding-24;
flex-direction: row;
}
@@ -455,14 +455,11 @@
color: $indigo-900;
font-weight: $gl-font-weight-bold;
line-height: 18px;
+ margin-left: 2px;
&:hover {
background-color: $white-light;
}
-
- @include media-breakpoint-down(xs) {
- margin-top: $gl-padding-4;
- }
}
.navbar-nav {
Edited by George Tsiolis