Community Forums › Forums › Archived Forums › Design Tips and Tricks › Can I display the full Remobile menu on larger displays?
- This topic has 1 reply, 2 voices, and was last updated 9 years, 3 months ago by Lauren @ OnceCoupled.
-
AuthorPosts
-
January 9, 2015 at 12:57 am #136459CamiCamiMember
Hello,
I use the Remobile theme and the top menu comes up as responsive by default - even when accessing from a large display.
I'd like the responsive menu to come up for phone users only. Is this something I can do just by changing the CSS? (I'm a Rainmaker user and don't have access to my functions file.)
I'm pasting below anything to do with the responsive menu that I could find on the theme's style sheet. I don't know what I'm looking for, sorry!
Many thanks.
###
/* Typographical Elements
--------------------------------------------- */a,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.responsive-menu-icon::before {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}/* Responsive Menu
--------------------------------------------- */.responsive-menu {
display: none;
}.responsive-menu-icon {
cursor: pointer;
display: inline-block;
text-align: center;
}.responsive-menu-icon::after {
background-color: #fff;
color: #333;
content: "\f333";
display: block;
font: normal 24px/1 'dashicons';
height: 32px;
margin: 0 auto;
padding-top: 8px;
width: 44px;
}/*
Media Queries
---------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 800px) {.genesis-nav-menu.responsive-menu .sub-menu:after,
.genesis-nav-menu.responsive-menu .sub-menu:before,
.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
.genesis-nav-menu.responsive-menu {
display: none;
}.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
display: block;
}.genesis-nav-menu.responsive-menu .menu-item {
text-align: left;
}.genesis-nav-menu.responsive-menu .menu-item:hover {
position: static;
}.genesis-nav-menu.responsive-menu li a,
.genesis-nav-menu.responsive-menu li a:hover {
display: block;
line-height: 1;
padding: 16px 20px;
}.nav-primary .genesis-nav-menu.responsive-menu a,
.nav-primary .genesis-nav-menu.responsive-menu a:hover {
font-size: 14px;
color: #000;
}.nav-secondary .genesis-nav-menu.responsive-menu a,
.nav-secondary .genesis-nav-menu.responsive-menu a:hover {
color: #fff;
}.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 60px;
}.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: "\f347";
float: right;
font: normal 16px/1 'dashicons';
height: 16px;
padding: 14px 20px;
right: 0;
text-align: right;
z-index: 9999;
}.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: "\f343";
}.genesis-nav-menu.responsive-menu .sub-menu {
background-color: rgba(0, 0, 0, 0.05);
}.genesis-nav-menu .menu-item:hover > .sub-menu > .menu-item:hover > .sub-menu,
.genesis-nav-menu .menu-item:hover > .sub-menu,
.genesis-nav-menu.responsive-menu .sub-menu {
left: auto;
opacity: 1;
margin: 0 auto;
position: relative;
width: 100%;
}.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
background-color: transparent;
margin: 0;
padding-left: 20px;
}.genesis-nav-menu.responsive-menu .sub-menu li a,
http://www.camilaartoni.com/
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
background: none;
border: none;
padding: 14px 20px;
position: relative;
width: 100%;
}January 9, 2015 at 7:48 am #136468Lauren @ OnceCoupledMemberIn the future, post your code in between the code tags. This will format your code for other readers and (in some cases) keep people from breaking their sites.
You want to start by showing your menu and hiding your responsive-menu-icon:
.responsive-menu { } .responsive-menu-icon { display: none; }
Then move the unedited version of that code to the media queries section.
Is that clear?
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.