From 16a0bbc37c0ca8c884d048ebc6ecaf2b4ba2a146 Mon Sep 17 00:00:00 2001
From: Brian Canini <canini.16@osu.edu>
Date: Mon, 8 Feb 2021 09:49:27 -0500
Subject: [PATCH] removing sticky nav from mobile view
---
.../assets/sass/components/_menu.scss | 10 ++
web/themes/asc_bootstrap/css/style.css | 110 ++++++++++--------
2 files changed, 72 insertions(+), 48 deletions(-)
diff --git a/web/themes/asc_bootstrap/assets/sass/components/_menu.scss b/web/themes/asc_bootstrap/assets/sass/components/_menu.scss
index 541eb0de88..2f1fe72caf 100644
--- a/web/themes/asc_bootstrap/assets/sass/components/_menu.scss
+++ b/web/themes/asc_bootstrap/assets/sass/components/_menu.scss
@@ -7,6 +7,11 @@
position: -webkit-sticky;
position: sticky;
z-index: 50;
+
+ @media (max-width: 768px) {
+ position: inherit;
+ display: block;
+ }
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
@@ -183,6 +188,11 @@
position: fixed;
top: 0;
width: 100%;
+
+ @media (max-width: 768px) {
+ position: inherit;
+ display: block;
+ }
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
diff --git a/web/themes/asc_bootstrap/css/style.css b/web/themes/asc_bootstrap/css/style.css
index 6fb3dc63e5..d1e97da6de 100644
--- a/web/themes/asc_bootstrap/css/style.css
+++ b/web/themes/asc_bootstrap/css/style.css
@@ -11574,24 +11574,31 @@ article .field--name-body {
position: sticky;
z-index: 50;
}
+@media (max-width: 768px) {
+ /* line 5, ../assets/sass/components/_menu.scss */
+ #main-nav {
+ position: inherit;
+ display: block;
+ }
+}
-/* line 12, ../assets/sass/components/_menu.scss */
+/* line 17, ../assets/sass/components/_menu.scss */
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
background: transparent;
color: #333333;
}
-/* line 17, ../assets/sass/components/_menu.scss */
+/* line 22, ../assets/sass/components/_menu.scss */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background-color: transparent;
}
-/* line 21, ../assets/sass/components/_menu.scss */
+/* line 26, ../assets/sass/components/_menu.scss */
.dropdown-submenu.pull-left {
float: none;
}
-/* line 25, ../assets/sass/components/_menu.scss */
+/* line 30, ../assets/sass/components/_menu.scss */
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
@@ -11601,51 +11608,51 @@ article .field--name-body {
border-radius: 6px 0 6px 6px;
}
-/* line 31, ../assets/sass/components/_menu.scss */
+/* line 36, ../assets/sass/components/_menu.scss */
.navbar-nav li:last-child > .dropdown-menu .dropdown-submenu > a:after {
float: left;
content: "\e079";
}
-/* line 35, ../assets/sass/components/_menu.scss */
+/* line 40, ../assets/sass/components/_menu.scss */
.navbar-nav li:last-child > .dropdown-menu .dropdown-submenu > .dropdown-menu {
left: -100%;
}
-/* line 41, ../assets/sass/components/_menu.scss */
+/* line 46, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white {
margin-bottom: 0;
}
-/* line 44, ../assets/sass/components/_menu.scss */
+/* line 49, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a {
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
font-weight: 400;
}
-/* line 50, ../assets/sass/components/_menu.scss */
+/* line 55, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a:hover {
background: rgba(216, 216, 216, 0.25);
}
-/* line 55, ../assets/sass/components/_menu.scss */
+/* line 60, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li {
background: transparent;
}
-/* line 58, ../assets/sass/components/_menu.scss */
+/* line 63, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li ul {
background: #E0E0E0;
}
-/* line 61, ../assets/sass/components/_menu.scss */
+/* line 66, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li ul a {
color: #4A4A4A;
text-transform: none;
}
-/* line 65, ../assets/sass/components/_menu.scss */
+/* line 70, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li ul a:hover {
background: #BB0000;
color: #ffffff;
}
-/* line 73, ../assets/sass/components/_menu.scss */
+/* line 78, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white .sfHover a.sf-depth-1:after {
content: '';
position: absolute;
@@ -11657,20 +11664,20 @@ article .field--name-body {
border-right: 8px solid transparent;
z-index: 400;
}
-/* line 86, ../assets/sass/components/_menu.scss */
+/* line 91, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a.sf-depth-1 svg, #superfish-main.sf-style-white a.sf-depth-1 i {
display: none;
}
-/* line 91, ../assets/sass/components/_menu.scss */
+/* line 96, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a.sf-with-ul {
padding: 0.75em 1em;
}
-/* line 95, ../assets/sass/components/_menu.scss */
+/* line 100, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white svg, #superfish-main.sf-style-white i {
float: right;
}
-/* line 100, ../assets/sass/components/_menu.scss */
+/* line 105, ../assets/sass/components/_menu.scss */
.search-box {
background: #E8E8E4;
position: absolute;
@@ -11683,7 +11690,7 @@ article .field--name-body {
border-top: 4px solid #D80B15;
display: none;
}
-/* line 112, ../assets/sass/components/_menu.scss */
+/* line 117, ../assets/sass/components/_menu.scss */
.search-box:before {
content: "";
position: absolute;
@@ -11694,7 +11701,7 @@ article .field--name-body {
border-top: 14px solid transparent;
border-bottom: 14px solid #D80B15;
}
-/* line 123, ../assets/sass/components/_menu.scss */
+/* line 128, ../assets/sass/components/_menu.scss */
.search-box input[type="text"] {
width: 200px;
padding: 5px 10px;
@@ -11702,7 +11709,7 @@ article .field--name-body {
border: 1px solid #D80B15;
outline: none;
}
-/* line 131, ../assets/sass/components/_menu.scss */
+/* line 136, ../assets/sass/components/_menu.scss */
.search-box input[type="button"] {
width: 80px;
padding: 5px 0;
@@ -11714,22 +11721,22 @@ article .field--name-body {
cursor: pointer;
}
-/* line 143, ../assets/sass/components/_menu.scss */
+/* line 148, ../assets/sass/components/_menu.scss */
#superfish-main {
width: 95%;
}
-/* line 147, ../assets/sass/components/_menu.scss */
+/* line 152, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a:focus {
color: #373535;
}
-/* line 150, ../assets/sass/components/_menu.scss */
+/* line 155, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a:hover {
color: #ffffff;
}
-/* line 160, ../assets/sass/components/_menu.scss */
+/* line 165, ../assets/sass/components/_menu.scss */
#main-nav-menubar-instructions {
background-color: rgba(0, 0, 0, 0.9);
position: absolute;
@@ -11740,132 +11747,139 @@ article .field--name-body {
display: none;
width: 450px;
}
-/* line 170, ../assets/sass/components/_menu.scss */
+/* line 175, ../assets/sass/components/_menu.scss */
#main-nav-menubar-instructions p {
color: #ffffff;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
-/* line 182, ../assets/sass/components/_menu.scss */
+/* line 187, ../assets/sass/components/_menu.scss */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
+@media (max-width: 768px) {
+ /* line 187, ../assets/sass/components/_menu.scss */
+ .sticky {
+ position: inherit;
+ display: block;
+ }
+}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
-/* line 189, ../assets/sass/components/_menu.scss */
+/* line 199, ../assets/sass/components/_menu.scss */
.sticky + .content {
padding-top: 60px;
}
@media (max-width: 768px) {
- /* line 201, ../assets/sass/components/_menu.scss */
+ /* line 211, ../assets/sass/components/_menu.scss */
#main-nav .container {
padding-left: 0;
padding-right: 0;
}
- /* line 205, ../assets/sass/components/_menu.scss */
+ /* line 215, ../assets/sass/components/_menu.scss */
#main-nav .container:after {
content: "";
display: none;
}
- /* line 209, ../assets/sass/components/_menu.scss */
+ /* line 219, ../assets/sass/components/_menu.scss */
#main-nav .container .clearfix:after {
content: "";
display: none;
}
- /* line 215, ../assets/sass/components/_menu.scss */
+ /* line 225, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white > a:after {
content: "";
display: none;
}
- /* line 219, ../assets/sass/components/_menu.scss */
+ /* line 229, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-accordion.sf-accordion-with-buttons li.sf-expanded > .sf-accordion-button:after {
content: "";
display: none;
}
- /* line 224, ../assets/sass/components/_menu.scss */
+ /* line 234, ../assets/sass/components/_menu.scss */
#block-dummyheader img {
width: 100%;
}
- /* line 228, ../assets/sass/components/_menu.scss */
+ /* line 238, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a {
background: transparent;
border: none;
font-size: 30px;
}
- /* line 233, ../assets/sass/components/_menu.scss */
+ /* line 243, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a span {
display: none;
}
- /* line 238, ../assets/sass/components/_menu.scss */
+ /* line 248, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a.sf-expanded {
background: transparent;
}
- /* line 242, ../assets/sass/components/_menu.scss */
+ /* line 252, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-accordion.sf-accordion-with-buttons .sf-accordion-button:after {
content: "";
margin: 0;
}
- /* line 247, ../assets/sass/components/_menu.scss */
+ /* line 257, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white.sf-accordion li.sf-expanded {
background: #F5F5F5;
}
- /* line 251, ../assets/sass/components/_menu.scss */
+ /* line 261, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white li, ul.sf-menu.sf-style-white.sf-navbar {
border: solid 1px #979797;
}
- /* line 255, ../assets/sass/components/_menu.scss */
+ /* line 265, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white.sf-accordion li li a, ul.sf-menu.sf-style-white.sf-accordion li li span.nolink {
background: #E0E0E0;
}
- /* line 259, ../assets/sass/components/_menu.scss */
+ /* line 269, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white a, ul.sf-menu.sf-style-white a:visited, ul.sf-menu.sf-style-white span.nolink {
color: #373735;
}
- /* line 264, ../assets/sass/components/_menu.scss */
+ /* line 274, ../assets/sass/components/_menu.scss */
.sf-menu .sf-depth-1 a {
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
}
- /* line 270, ../assets/sass/components/_menu.scss */
+ /* line 280, ../assets/sass/components/_menu.scss */
.sf-menu .sf-depth-2 a {
text-transform: none;
font-weight: 400;
}
- /* line 275, ../assets/sass/components/_menu.scss */
+ /* line 285, ../assets/sass/components/_menu.scss */
.sf-menu .hidetxt {
position: absolute;
left: -99999999px;
width: 0;
height: 0;
}
- /* line 282, ../assets/sass/components/_menu.scss */
+ /* line 292, ../assets/sass/components/_menu.scss */
.sf-menu .sf-accordion-button {
padding: 5px 15px 0;
border-left: solid 1px #979797 !important;
background: #E0E0E0 !important;
}
- /* line 287, ../assets/sass/components/_menu.scss */
+ /* line 297, ../assets/sass/components/_menu.scss */
.sf-menu .sf-accordion-button svg, .sf-menu .sf-accordion-button i {
font-size: 18px;
color: #BB0000;
}
- /* line 294, ../assets/sass/components/_menu.scss */
+ /* line 304, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a {
padding: .05em .5em;
}
--
GitLab