Community Forums › Forums › Archived Forums › Design Tips and Tricks › Hide Secondary Nav Bar at mobile
- This topic has 2 replies, 2 voices, and was last updated 8 years, 10 months ago by Tmgale.
-
AuthorPosts
-
June 26, 2015 at 1:47 am #157557TmgaleMember
Hi All,
I dont want my secondary nav bar to show in mobile. Does anyone know how I can achieve this?
Thanks!!
Tom
June 26, 2015 at 1:52 am #157558Davinder Singh KainthMemberAdd following code at bottom of style.css file
@media only screen and (max-width: 480px) { .nav-secondary { display: none; } }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesJune 26, 2015 at 2:06 am #157559TmgaleMemberThanks for the reply davinder, I added the code to the bottom of the style sheet but it did not work. I also tried with !important.
I am using a mobile menu at 1000px and below, however it shows the secondary menu.
The url is http://rewards.allcleartravel.co.uk/
Do you think I need to add something to my mobile menu code?
The code for the responsive menu is:
/* Navigation toggles
--------------------------------------------- */.sub-menu-toggle,
.menu-toggle {
display: none;
visibility: hidden;
}/* Navigation toggles - Ensure Menu Displays when Scaled Up
--------------------------------------------- */
@media only screen and (min-width: 1191px) {nav {
display: block !important;}
}/* Navigation toggles - Mobile (Change max width as you see fit)
--------------------------------------------- */
@media only screen and (max-width: 1000px) {.nav-secondary {
visibility: hidden !important;}
.menu-toggle,
.sub-menu-toggle {
display: block;
font-size: 16px;
font-size: 2rem;
font-weight: 700;
margin: 0 auto;
overflow: visible;
padding: px;
padding: ;
text-align: center;
visibility: visible;
}button.menu-toggle {
background-color: #33abdf;
color: #fff;
float: ;
width:100%}
button.sub-menu-toggle {
background-color: transparent;
color: #fff;
padding-bottom:px;
margin-top: -30px;}
.sub-menu-toggle {
padding: 18px;
padding: 1.8rem;
position: absolute;
right: 0;
top: 0;
}.menu-toggle:after {
content: "\2261";
float: ;
}.menu-toggle:before {
content: "menu";
float: ;
padding-right: 5px;}
.menu-toggle.activated:before {
content: "\2191";
}.sub-menu-toggle:before {
content: "+";
}.sub-menu-toggle.activated:before {
content: "-";
}nav {
display: none;
position: relative;
}.genesis-nav-menu .menu-item {
background-color: #33abdf;
display: block;
position: relative;
text-align: left;
padding: 5px;
margin-right: 50px;}
.genesis- nav-menu .menu-item:hover {
position: relative;
}.genesis-nav-menu .sub-menu {
clear: both;
display: none;
opacity: 1;
position: static;
width: 100%;
}.genesis-nav-menu .sub-menu a {
border-left: 0;
position: relative;
width: auto;
}.genesis-nav-menu .sub-menu .sub-menu {
margin: 0;
}.genesis-nav-menu .sub-menu .sub-menu a {
background-color: #fff;
padding-left: px; 30
}.genesis-nav-menu .sub-menu .sub-menu .sub-menu a {
background-color: #000000;
padding-left: px;
}.nav-primary a:hover,
.nav-primary .current-menu-item > a {
color: #fff;
}}
} -
AuthorPosts
- The topic ‘Hide Secondary Nav Bar at mobile’ is closed to new replies.