Community Forums › Forums › Archived Forums › General Discussion › Menu Mobile Genesis
- This topic has 1 reply, 1 voice, and was last updated 7 years, 10 months ago by James84.
-
AuthorPosts
-
May 21, 2016 at 2:29 am #186004James84Member
I'm trying to make the floating menu of simple genesis. I followed several guides found on the web, I uploaded js and php files and everything is ok. The CSS makes me disappear for screens menu below 768px, but then does not appear floating menu? because?
I thank you for your kind attention
Place under the css find anywhere.
/* Responsive Navigation
---------------------------------------------------------------------------------------------------- *//* Standard Navigation
--------------------------------------------- */nav {
clear: both;
}
/* 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: 768px) {nav {
display: block !important;
}
}
/* Navigation toggles - Mobile (Change max width as you see fit)
--------------------------------------------- */
@media only screen and (max-width: 767px) {.menu-toggle,
.sub-menu-toggle {
display: block;
font-size: 20px;
font-size: 2rem;
font-weight: 700;
margin: 0 auto;
overflow: hidden;
padding: 20px;
padding: 2rem;
text-align: center;
visibility: visible;
}
button.menu-toggle,
button.sub-menu-toggle {
background-color: transparent;
color: #999;
}.sub-menu-toggle {
padding: 18px;
padding: 1.8rem;
position: absolute;
right: 0;
top: 0;
}
.sub-menu-toggle {
padding: 18px;
padding: 1.8rem;
position: absolute;
right: 0;
top: 0;
}.menu-toggle:before {
content: "\2261";
}.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: #f5f5f5;
display: block;
position: relative;
text-align: left;
}.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: #f5f5f5;
padding-left: 30px;
}.genesis-nav-menu .sub-menu .sub-menu .sub-menu a {
background-color: #fff;
padding-left: 40px;
}.nav-primary a:hover,
.nav-primary .current-menu-item > a {
color: #333;
}}
}
May 22, 2016 at 8:17 am #186074James84MemberThank you
I found a little problem -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.