-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
…e-for-hamburger-activation Fixed responsiveness
- Loading branch information
Showing
5 changed files
with
186 additions
and
184 deletions.
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,75 @@ | ||
| @import './themeColorVariables'; | ||
|
|
||
|
|
||
| .navbar-toggler-icon, | ||
| .navbar-toggler-icon .navbar-dark { | ||
| background-image: none !important; | ||
| background-image: none !important; | ||
| } | ||
|
|
||
|
|
||
| // The hamburger container. Changing height and width shouldn't affect the hamburger | ||
| .navbar-toggler { | ||
| display: flex !important; | ||
| position: relative !important; | ||
| align-items: center !important; | ||
| justify-content: center !important; | ||
| background-color: transparent !important; | ||
| width: 56px !important; | ||
| height: 56px !important; | ||
|
|
||
| position: relative !important; | ||
| align-items: center !important; | ||
| justify-content: center !important; | ||
| background-color: transparent !important; | ||
| width: 56px !important; | ||
| height: 56px !important; | ||
| } | ||
|
|
||
| // Hamburger icon when the nav is closed | ||
| .navbar-toggler.collapsed { | ||
|
|
||
| .hamburger { | ||
| width: 60% !important; | ||
| } | ||
|
|
||
| .hamburger-top { | ||
| top: 25% !important; | ||
| transform: rotate(0deg); | ||
| } | ||
|
|
||
| .hamburger-mid { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .hamburger-bottom { | ||
| bottom: 25% !important; | ||
| transform: rotate(0deg); | ||
| } | ||
| .hamburger { | ||
| width: 60% !important; | ||
| } | ||
|
|
||
| .hamburger-top { | ||
| top: 25% !important; | ||
| transform: rotate(0deg); | ||
| } | ||
|
|
||
| .hamburger-mid { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .hamburger-bottom { | ||
| bottom: 25% !important; | ||
| transform: rotate(0deg); | ||
| } | ||
| } | ||
|
|
||
| .hamburger { | ||
| display: flex !important; | ||
| position: absolute !important; | ||
| background-color: map-get($theme-colors, theme-new-light) !important; | ||
| height: 7% !important; | ||
| transition: .2s; | ||
| display: flex !important; | ||
| position: absolute !important; | ||
| background-color: map-get($theme-colors, theme-new-light) !important; | ||
| height: 7% !important; | ||
| transition: 0.2s; | ||
| } | ||
|
|
||
| // Hamburger as an X | ||
| .hamburger-top, | ||
| .hamburger-bottom { | ||
| width: 75%; | ||
| width: 75%; | ||
| } | ||
|
|
||
| .hamburger-top { | ||
| transform: rotate(45deg); | ||
| transform: rotate(45deg); | ||
| } | ||
|
|
||
| .hamburger-mid { | ||
| opacity: 0; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .hamburger-bottom { | ||
| transform: rotate(-45deg); | ||
| transform: rotate(-45deg); | ||
| } | ||
|
|
||
| @media (min-width: 767px) { | ||
| .navbar-toggler { | ||
| display: none !important; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 991px) { | ||
| .navbar-toggler { | ||
| display: none !important; | ||
| } | ||
| } | ||
| @media (max-width: 767px) { | ||
| .navbar-toggler { | ||
| display: flex !important; | ||
| } | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1,69 @@ | ||
| #navItems:hover { | ||
| color: black !important; | ||
| color: black !important; | ||
| } | ||
|
|
||
| .logo-noroff { | ||
| width: 40px; | ||
| height: 56px; | ||
| } | ||
| .logo-noroff { | ||
| width: 40px; | ||
| height: 56px; | ||
| } | ||
|
|
||
| .login-button { | ||
| white-space: nowrap; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| @media (max-width: 980px) { | ||
| #navUl{ | ||
| @media (max-width: 767px) { | ||
| #navUl { | ||
| align-items: center; | ||
| padding-bottom: 2rem; | ||
| padding-top: 1rem; | ||
| white-space: nowrap; | ||
| } | ||
| .navbar-toggler { | ||
| width: 35px; | ||
| height: 25px; | ||
| position: relative; | ||
| transition: .5s ease-in-out; | ||
| margin-left: 20px; | ||
| outline: none; | ||
| margin-right:20px ; | ||
| } | ||
|
|
||
| .navbar-toggler, | ||
| .navbar-toggler:focus, | ||
| .navbar-toggler:active, | ||
| .navbar-toggler-icon:focus { | ||
| outline: none; | ||
| box-shadow: none; | ||
| border: 0; | ||
| } | ||
|
|
||
| .navbar-toggler span{ | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| .toggler-icon { | ||
| display: block; | ||
| position: absolute; | ||
| height: 4px; | ||
| width: 100%; | ||
| background: white; | ||
| border-radius: 1px; | ||
| opacity: 1; | ||
| left: 0; | ||
| transform: rotate(0deg); | ||
| transition: .25s ease-in-out; | ||
| } | ||
|
|
||
| .middle-bar { | ||
| margin-top: 0px; | ||
|
|
||
| } | ||
|
|
||
| .navbar-toggler .top-bar { | ||
| margin-top: 0px; | ||
| transform: rotate(135deg); | ||
| } | ||
| } | ||
|
|
||
| .navbar-toggler .middle-bar { | ||
| opacity: 0; | ||
| filter: alpha(opacity=0); | ||
| } | ||
| @media (min-width: 767px) and (max-width: 1100px) { | ||
| header { | ||
| max-width: 100vw; | ||
| height: 72px; | ||
| } | ||
|
|
||
| .navbar-toggler .bottom-bar { | ||
| margin-top: 0px; | ||
| transform: rotate(-135deg); | ||
| } | ||
| #nav-container { | ||
| padding: 0 !important; | ||
| } | ||
| #navUl { | ||
| display: flex; | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| .navbar-toggler.collapsed .top-bar { | ||
| margin-top: -20px; | ||
| transform: rotate(0deg); | ||
| } | ||
| #navbarNav.collapse { | ||
| display: flex !important; | ||
| flex-direction: row !important; | ||
| justify-content: space-between !important; | ||
| position: absolute; | ||
| right: 0; | ||
| } | ||
|
|
||
| .navbar-toggler.collapsed .middle-bar { | ||
| opacity: 1; | ||
| filter: alpha(opacity=100); | ||
| } | ||
| #nav-elements { | ||
| width: 100% !important; | ||
| margin: 0 !important; | ||
| padding: 0 !important; | ||
|
|
||
| .navbar-toggler.collapsed .bottom-bar { | ||
| margin-top: 20px; | ||
| transform: rotate(0deg); | ||
| } | ||
| justify-content: space-between !important; | ||
| flex-wrap: nowrap !important; | ||
| } | ||
|
|
||
|
|
||
| #nav-elements { | ||
| position: absolute !important; | ||
| margin-left: 0 !important; | ||
| padding-left: 0 !important; | ||
| left: 0; | ||
| } | ||
| .navbar { | ||
| display: flex !important; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| margin-left: 0 !important; | ||
| padding-left: 0 !important; | ||
| padding-right: 0 !important; | ||
| height: 72px !important; | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
| //Costomizes the hamburger menu icon | ||
| $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#fff' stroke-linecap='square' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/></svg>"); | ||
| $navbar-toggler-font-size: 2rem; |
Oops, something went wrong.