Need help with rogue nav bar flashing when refreshing on mobile
resolver
Hello,
I am having trouble finding and eliminating an old mobile nav bar which shows when our homepage is refreshed while viewing on mobile or tabler sized device. I did not write the code for this nav bar, and I have looked through the js and css files which are attached to the page and none of them seem to be causing this to show.
The nav bar which flashes is not the one which is being used although they may be overlapping each other and may not be noticeable since they are styled the same way.
It might be caused by your CSS. I am noticing in your theme CSS inside of Section 3 "Main Navigation" you have the following media query:
(note, the menu flashing is the menu you are using, it's just the JS hasn't fired yet to add in the toggles for the submenus so that's why it looks different)
@media (max-width: 991px) {
/* Variables
========================================================================== *//* Set Mobile Menu Background Color */ /* Set Link Color */ /* Set Link Hover Color */ /*
* Menu Reset
*
* Remove styling from desktop version of custom-menu-primary. Place any
* additional CSS you want removed from the mobile menu in this reset
*/ .custom-menu-primary, .custom-menu-primary .hs-menu-wrapper > ul, .custom-menu-primary .hs-menu-wrapper > ul li, .custom-menu-primary .hs-menu-wrapper > ul li a {
display: block;
float: none;
position: static;
top: auto;
right: auto;
left: auto;
bottom: auto;
padding: 0px;
margin: 0px;
background-image: none;
background-color: transparent;
border: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
max-width: none;
width: 100%;
height: auto;
line-height: 1;
font-weight: normal;
text-decoration: none;
text-indent: 0px;
text-align: left;
color: #ffffff;
}
the first class you are referencing appears to be causing the menu to briefly show while a few more lines down in your CSS you then have it display none. I would take this first class off of there and instead try this:
@media (max-width: 991px) {
/* Variables
========================================================================== *//* Set Mobile Menu Background Color */ /* Set Link Color */ /* Set Link Hover Color */ /*
* Menu Reset
*
* Remove styling from desktop version of custom-menu-primary. Place any
* additional CSS you want removed from the mobile menu in this reset
*/
.custom-menu-primary {
display:none;
}
.custom-menu-primary .hs-menu-wrapper > ul, .custom-menu-primary .hs-menu-wrapper > ul li, .custom-menu-primary .hs-menu-wrapper > ul li a {
display: block;
float: none;
position: static;
top: auto;
right: auto;
left: auto;
bottom: auto;
padding: 0px;
margin: 0px;
background-image: none;
background-color: transparent;
border: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
max-width: none;
width: 100%;
height: auto;
line-height: 1;
font-weight: normal;
text-decoration: none;
text-indent: 0px;
text-align: left;
color: #ffffff;
}
this should cause the element housing the nav to not be displayed by default and then once your JS injects the mobile button/toggle, you should then be good to go as that will be toggling the display: block/none style inline which would override this class.
Hopefully, this helps point you in the right direction.
Need help with rogue nav bar flashing when refreshing on mobile
resolver
Thanks for the reply, AJ! It did put me on the right track. I ended up putting this class in place of the one you suggested.
/* Hide menu on mobile when page first loads */
.custom-menu-primary .hs-menu-wrapper,
.custom-menu-primary .hs-menu-children-wrapper{
display: none;
}
It seems this class didn't target the right selector.
.custom-menu-primary {
display:none;
}
It seems to be working though, so I really appreciate the help!
It might be caused by your CSS. I am noticing in your theme CSS inside of Section 3 "Main Navigation" you have the following media query:
(note, the menu flashing is the menu you are using, it's just the JS hasn't fired yet to add in the toggles for the submenus so that's why it looks different)
@media (max-width: 991px) {
/* Variables
========================================================================== *//* Set Mobile Menu Background Color */ /* Set Link Color */ /* Set Link Hover Color */ /*
* Menu Reset
*
* Remove styling from desktop version of custom-menu-primary. Place any
* additional CSS you want removed from the mobile menu in this reset
*/ .custom-menu-primary, .custom-menu-primary .hs-menu-wrapper > ul, .custom-menu-primary .hs-menu-wrapper > ul li, .custom-menu-primary .hs-menu-wrapper > ul li a {
display: block;
float: none;
position: static;
top: auto;
right: auto;
left: auto;
bottom: auto;
padding: 0px;
margin: 0px;
background-image: none;
background-color: transparent;
border: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
max-width: none;
width: 100%;
height: auto;
line-height: 1;
font-weight: normal;
text-decoration: none;
text-indent: 0px;
text-align: left;
color: #ffffff;
}
the first class you are referencing appears to be causing the menu to briefly show while a few more lines down in your CSS you then have it display none. I would take this first class off of there and instead try this:
@media (max-width: 991px) {
/* Variables
========================================================================== *//* Set Mobile Menu Background Color */ /* Set Link Color */ /* Set Link Hover Color */ /*
* Menu Reset
*
* Remove styling from desktop version of custom-menu-primary. Place any
* additional CSS you want removed from the mobile menu in this reset
*/
.custom-menu-primary {
display:none;
}
.custom-menu-primary .hs-menu-wrapper > ul, .custom-menu-primary .hs-menu-wrapper > ul li, .custom-menu-primary .hs-menu-wrapper > ul li a {
display: block;
float: none;
position: static;
top: auto;
right: auto;
left: auto;
bottom: auto;
padding: 0px;
margin: 0px;
background-image: none;
background-color: transparent;
border: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
max-width: none;
width: 100%;
height: auto;
line-height: 1;
font-weight: normal;
text-decoration: none;
text-indent: 0px;
text-align: left;
color: #ffffff;
}
this should cause the element housing the nav to not be displayed by default and then once your JS injects the mobile button/toggle, you should then be good to go as that will be toggling the display: block/none style inline which would override this class.
Hopefully, this helps point you in the right direction.
Need help with rogue nav bar flashing when refreshing on mobile
resolver
Thanks for the reply, AJ! It did put me on the right track. I ended up putting this class in place of the one you suggested.
/* Hide menu on mobile when page first loads */
.custom-menu-primary .hs-menu-wrapper,
.custom-menu-primary .hs-menu-children-wrapper{
display: none;
}
It seems this class didn't target the right selector.
.custom-menu-primary {
display:none;
}
It seems to be working though, so I really appreciate the help!
