This topic is: resolved
- This topic has 23 replies, 3 voices, and was last updated 7 years, 3 months ago by
.
-
Posts
-
Hi, I´m having this problem. I can´t see the hamburguer / accordion menu in the mobile version. The web is http://eloyhanoi.com/ and my custom css code is:
/*
Theme Name: Lifestyle Pro Theme child del child
Theme URI: http://my.studiopress.com/themes/lifestyle/
Description: A mobile responsive and HTML5 theme built for the Genesis Framework.
Author: StudioPress
Author URI: http://www.studiopress.com/
Version: 3.0.0Tags: green, tan, white, one-column, two-columns, three-columns, fixed-width, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready
Template: genesis
Template Version: 2.0.0License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
@import url(https://fonts.googleapis.com/css?family=Chicle);.caja-viajes {
margin:0 0 25px;
overflow:hidden;
padding:20px;
-webkit-border-radius: 10px;
border-radius: 10px;
}.caja-viajes {
background-color:#fef5c4;
border:1px solid #fadf98;
}.site-header {
background-color: #ffffff;
padding: 0px;
padding: 0rem;
overflow: hidden;
}.genesis-nav-menu a {
color: #555555;
}.genesis-nav-menu {
font-size: 23px;
line-height: 30px;
font-family: "chicle";
}.nav-secondary {
background-color: #ffffff;
}.genesis-nav-menu > li:hover a, .genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a {
color #BA661E;
}.lifestyle-pro-home .content .widget-title {
background-color: #BA661E;
border-radius: 3px;
}.site-footer {
background-color: #ffffff;
}.site-footer {
color: #555555;
}.entry-title a:hover {
color: #BA661E;
}a {
color: #BA661E;
}button, input[type="button"], input[type="reset"], input[type="submit"], .button, .entry-content .button {
background-color: #BA661E;
color: #fff;
}h1,
http://www.eloyhanoi.com
h2,
h3,
h4,
h5,
h6 {
font-family: "chicle";
}Hi,
you don't seem to load a responsive-menu.js file.
Without it, you will not have a "hamburger menu".
By the way, Google Console shows a Javascript error:
http://prntscr.com/b89ypl
Ummm, it´s weird. Why that file cannot load properly? Maybe is something related with the site header padding or something like that?
Make sure the file is properly enqueued in your functions.php.
e.g.
wp_enqueue_script( 'lifestyle-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );You can take a look at how Lifestyle Pro 3.1.0 does it.
Looks like you still need to upload the file:
http://prntscr.com/bb1cyo
The file is updated with this code:
wp_enqueue_script( 'lifestyle-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );in Lyfestyle pro theme functions.php
That part is fine.
That code is telling WordPress to use and where to find the reponsive-menu.js file.Unfortunately, the file is not in that location on your server which is causing the
error message:Failed to load resource: the server responded with a status of 404 (Not Found)
I dont understand, I´ve checked my Cpanel themes/lyfestyle/functions.php and is there. Is that what you are saying?
I´m saying the file
responsive-menu.js
is not in the folder
/wp-content/themes/lifestyle-pro/js/
Sorry I´m so stupid! now I understand.
Well, I´ve just upload de js folder with the responsive-menu file but nothing happened, still the same problem!!
Now to the fun part.
You have to copy the css for the responsive menu from Lifestyle Pro 3.1 into your style.css file.
From Lifestyle Pro 3.1 copy the section Responsive Menu (around line 1143 to line 1162)
and everything in the media queries that contains the selector .genesis-nav-menu
Wow, all this code?:
/* Responsive Menu --------------------------------------------- */ .responsive-menu-icon { cursor: pointer; display: none; text-align: center; } .responsive-menu-icon::before { content: "\f333"; display: inline-block; font: normal 20px/1 'dashicons'; margin: 0 auto; padding: 10px; } .site-header .responsive-menu-icon::before { padding: 0; } .genesis-nav-menu li, .site-header ul.genesis-nav-menu, .site-header .search-form { float: none; } .genesis-nav-menu, .site-description, .site-footer p, .site-header hgroup, .site-header .search-form, .site-title { text-align: center; } .genesis-nav-menu a { padding: 20px 16px; } .genesis-nav-menu li.alignleft, .genesis-nav-menu li.right { display: none; } .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 { margin: 0; } .genesis-nav-menu.responsive-menu .menu-item:hover { position: static; } .genesis-nav-menu.responsive-menu li.current-menu-item > a, .genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover, .genesis-nav-menu.responsive-menu li a, .genesis-nav-menu.responsive-menu li a:hover { background: none; border: none; display: block; line-height: 1; padding: 20px; text-transform: none; } .genesis-nav-menu.responsive-menu .current-menu-item > a, .genesis-nav-menu.responsive-menu .sub-menu a, .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .genesis-nav-menu.responsive-menu a:hover, .genesis-nav-menu.responsive-menu li:hover > a { 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: "\f140"; float: right; font: normal 20px/1 'dashicons'; height: 20px; padding: 16px 20px; right: 0; text-align: right; z-index: 9999; } .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { content: "\f142"; } .genesis-nav-menu.responsive-menu .sub-menu { background-color: rgba(0, 0, 0, 0.025); border: none; left: auto; opacity: 1; position: relative; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 100%; z-index: 99; } .genesis-nav-menu.responsive-menu .sub-menu .sub-menu { background-color: transparent; margin: 0; padding-left: 25px; } .genesis-nav-menu.responsive-menu > li:hover .sub-menu a:hover, .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .genesis-nav-menu.responsive-menu .sub-menu li a, .genesis-nav-menu.responsive-menu .sub-menu li a:hover { background: none; border: none; padding: 12px 20px; position: relative; text-transform: none; width: 100%; } .nav-primary .genesis-nav-menu.responsive-menu .current-menu-item > a, .nav-primary .genesis-nav-menu.responsive-menu .sub-menu a, .nav-primary .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .nav-primary .genesis-nav-menu.responsive-menu a:hover, .nav-primary .genesis-nav-menu.responsive-menu li:hover > a { color: #222; } .genesis-nav-menu a { font-size: 12px; }And I have to copy-paste the code and put it at the end of my original style.css?? I dont have to erase any code there?
No, don't put it at the end.
It´s always a bad idea to add code below the media queries.You see where it is located in the 3.1 style.css, just copy it over to the same locations.
The Responsive Menu section can go below the Secondary Navigation section and the
code from the media queries has to go in the same media queries in your style.cssOnce you´ve done that, I can take a look if you have to erase any code.
/* Theme Name: Lifestyle Pro Theme Theme URI: http://my.studiopress.com/themes/lifestyle/ Description: A mobile responsive and HTML5 theme built for the Genesis Framework. Author: StudioPress Author URI: http://www.studiopress.com/ Version: 3.0.0 Tags: green, tan, white, one-column, two-columns, three-columns, fixed-width, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready Template: genesis Template Version: 2.0.0 License: GPL-2.0+ License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* Table of Contents - HTML5 Reset - Baseline Normalize - Box Sizing - Float Clearing - Defaults - Typographical Elements - Headings - Objects - Forms - Tables - Structure and Layout - Site Containers - Column Widths and Positions - Column Classes - Home Page - Miscellaneous - Common Classes - WordPress - Genesis - Titles - Widgets - Featured Content - Plugins - Genesis eNews Extended - Genesis Responsive Slider - Gravity Forms - Jetpack - Site Header - Title Area - Widget Area - Site Navigation - Header Navigation - Primary Navigation - Secondary Navigation - Content Area - Home Page - Entries - Pagination - Comments - Sidebars - Footer Widgets - Site Footer - Theme Colors - Lifestyle Pro Blue - Lifestyle Pro Green - Lifestyle Pro Mustard - Lifestyle Pro Purple - Lifestyle Pro Red - Media Queries - Retina Display - max-width: 1139px - max-width: 1023px - max-width: 767px */ /* HTML5 Reset ---------------------------------------------------------------------------------------------------- */ /* Baseline Normalize normalize.css v2.1.2 | MIT License | git.io/normalize --------------------------------------------- */ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} /* Box Sizing --------------------------------------------- */ *, input[type="search"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Float Clearing --------------------------------------------- */ .clearfix:before, .entry-content:before, .entry:before, .footer-widgets:before, .nav-primary:before, .nav-secondary:before, .pagination:before, .site-container:before, .site-footer:before, .site-header:before, .site-inner:before, .widget:before, .wrap:before { content: " "; display: table; } .clearfix:after, .entry-content:after, .entry:after, .footer-widgets:after, .nav-primary:after, .nav-secondary:after, .pagination:after, .site-container:after, .site-footer:after, .site-header:after, .site-inner:after, .widget:after, .wrap:after { clear: both; content: " "; display: table; } /* Defaults ---------------------------------------------------------------------------------------------------- */ /* Typographical Elements --------------------------------------------- */ html { font-size: 62.5%; /* 10px browser default */ } body { color: #555555; font-family: 'Droid Sans', sans-serif; font-size: 16px; font-size: 1.6rem; font-weight: 300; line-height: 1.625; } a, button, input[type="button"], input[type="reset"], input[type="submit"], textarea:focus, .button { -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; } ::-moz-selection { background-color: #333; color: #fff; } ::selection { background-color: #333; color: #fff; } a { color: #76d2c5; text-decoration: none; } a:hover, .site-footer a:hover { color: #222; } p { margin: 0 0 16px; margin: 0 0 1.6rem; padding: 0; } strong { font-weight: 700; } ol, ul { margin: 0; padding: 0; } blockquote, blockquote::before { color: #999; } blockquote { margin: 40px 40px 24px; margin: 4rem 4rem 2.4rem; } blockquote::before { content: "“"; display: block; font-size: 30px; font-size: 3rem; height: 0; left: -20px; position: relative; top: -10px; } .entry-content code { background-color: #333; color: #ddd; } cite { font-style: normal; } /* Headings --------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: #222; font-family: 'Roboto Slab', sans-serif; font-weight: 300; line-height: 1.2; margin: 0 0 24px; margin: 0 0 2.4rem; } h1, .entry-title { font-size: 30px; font-size: 3rem; } h2, .home-top .entry-title { font-size: 24px; font-size: 2.4rem; } h3, .archive-title, .comments-title, .home-bottom .entry-title, .home-middle .entry-title { font-size: 20px; font-size: 2rem; } h4 { font-size: 20px; font-size: 2rem; } h5 { font-size: 18px; font-size: 1.8rem; } h6, .sidebar .entry-title { font-size: 16px; font-size: 1.6rem; } /* Objects --------------------------------------------- */ embed, iframe, img, object, video, .wp-caption { max-width: 100%; } img { height: auto; } .featured-content img, .gallery img { width: auto; /* IE8 */ } /* Forms --------------------------------------------- */ input, select, textarea { background-color: #fff; border: 1px solid #eeeee8; box-shadow: 0 0 5px #f8f8f8 inset; color: #999; font-size: 14px; font-size: 1.4rem; padding: 16px; padding: 1.6rem; width: 100%; } input[type="checkbox"], input[type="image"], input[type="radio"] { width: auto; } input:focus, textarea:focus { border: 1px solid #999; outline: none; } ::-moz-placeholder { color: #999; opacity: 1; } ::-webkit-input-placeholder { color: #999; } button, input[type="button"], input[type="reset"], input[type="submit"], .button, .entry-content .button { background-color: #76d2c5; box-shadow: none; border: none; color: #fff; cursor: pointer; padding: 16px 24px; padding: 1.6rem 2.4rem; width: auto; } button:hover, input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], .button:hover, .entry-content .button:hover { background-color: #eeeee8; color: #a5a5a3; } .button { display: inline-block; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button { display: none; } /* Tables --------------------------------------------- */ table { border-collapse: collapse; border-spacing: 0; line-height: 2; margin-bottom: 40px; margin-bottom: 4rem; width: 100%; } tbody { border-bottom: 1px solid #eeeee8; } th, td { text-align: left; } th { font-weight: bold; text-transform: uppercase; } td { border-top: 1px solid #eeeee8; padding: 6px 0; padding: 0.6rem 0; } /* Structure and Layout ---------------------------------------------------------------------------------------------------- */ /* Site Containers --------------------------------------------- */ .site-container { background-color: #fff; box-shadow: 0 0 5px #ddd; margin: 32px auto; margin: 3.2rem auto; max-width: 1140px; overflow: hidden; padding: 36px; padding: 3.6rem; } .site-inner { clear: both; padding-top: 32px; padding-top: 3.2rem; } .wrap { margin: 0 auto; max-width: 1140px; } /* Column Widths and Positions --------------------------------------------- */ /* Wrapping div for .content and .sidebar-primary */ .content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap { width: 868px; } .content-sidebar-sidebar .content-sidebar-wrap { float: left; } .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap { float: right; } /* Content */ .content { float: right; width: 700px; } .content-sidebar .content, .content-sidebar-sidebar .content, .sidebar-content-sidebar .content { float: left; } .content-sidebar-sidebar .content, .sidebar-content-sidebar .content, .sidebar-sidebar-content .content { width: 500px; } .full-width-content .content { width: 100%; } .lifestyle-pro-landing .site-container { max-width: 772px; } .lifestyle-pro-landing .site-inner, .lifestyle-pro-landing .entry { padding: 0; } /* Primary Sidebar */ .sidebar-primary { float: right; width: 332px; } .sidebar-content .sidebar-primary, .sidebar-sidebar-content .sidebar-primary { float: left; } /* Secondary Sidebar */ .sidebar-secondary { float: left; width: 164px; } .content-sidebar-sidebar .sidebar-secondary { float: right; } /* Column Classes Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css --------------------------------------------- */ .five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { float: left; margin-left: 2.564102564102564%; } .one-half, .three-sixths, .two-fourths { width: 48.717948717948715%; } .one-third, .two-sixths { width: 31.623931623931625%; } .four-sixths, .two-thirds { width: 65.81196581196582%; } .one-fourth { width: 23.076923076923077%; } .three-fourths { width: 74.35897435897436%; } .one-sixth { width: 14.52991452991453%; } .five-sixths { width: 82.90598290598291%; } .first { clear: both; margin-left: 0; } /* Common Classes ---------------------------------------------------------------------------------------------------- */ /* WordPress --------------------------------------------- */ .avatar { border-radius: 50%; float: left; } .alignleft .avatar { margin-right: 24px; margin-right: 2.4rem; } .alignright .avatar { margin-left: 24px; margin-left: 2.4rem; } .search-form { overflow: hidden; width: 100%; } .search-form input[type="search"] { background: #fff url(images/search.png) no-repeat 15px 16px; background-size: 15px 15px; padding: 16px 16px 16px 44px; padding: 1.6rem 1.6rem 1.6rem 4.4rem; } .search-form input[type="submit"] { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; padding: 0; position: absolute; width: 1px; } img.centered, .aligncenter { display: block; margin: 0 auto 24px; margin: 0 auto 2.4rem; } a.alignnone img, img.alignnone { margin-bottom: 12px; margin-bottom: 1.2rem; } .alignleft { float: left; text-align: left; } .alignright { float: right; text-align: right; } a.alignleft, a.alignright { max-width: 100%; } a.alignleft img, img.alignleft, .wp-caption.alignleft { margin: 0 24px 24px 0; margin: 0 2.4rem 2.4rem 0; } a.alignright img, img.alignright, .wp-caption.alignright { margin: 0 0 24px 24px; margin: 0 0 2.4rem 2.4rem; } .entry-content .wp-caption-text { font-size: 14px; font-size: 1.4rem; margin: 0; text-align: center; } .widget_calendar table { width: 100%; } .widget_calendar td, .widget_calendar th { text-align: center; } /* Genesis --------------------------------------------- */ .breadcrumb { border: 1px solid #eeeee8; font-size: 12px; font-size: 1.2rem; margin-bottom: 32px; margin-bottom: 3.2rem; padding: 16px 32px; padding: 1.6rem 3.2rem; } .archive-description, .author-box, .sticky { border: 1px solid #eeeee8; margin-bottom: 32px; margin-bottom: 3.2rem; overflow: hidden; padding: 32px; padding: 3.2rem; } .author-box-title { font-size: 16px; font-size: 1.6rem; margin: 0 0 8px; margin: 0 0 0.8rem; } .author-box p { margin-bottom: 0; } .author-box .avatar { margin-right: 24px; margin-right: 2.4rem; } /* Titles --------------------------------------------- */ .site-header .widget-title { color: #fff; } .entry-title a, .sidebar .widget-title a { color: #222; text-decoration: none; } .entry-title a:hover { color: #76d2c5; } .archive-title { font-size: 20px; font-size: 2rem; } /* Widgets ---------------------------------------------------------------------------------------------------- */ .widget { word-wrap: break-word; } /* Featured Content --------------------------------------------- */ .featured-content .entry { margin-bottom: 32px; margin-bottom: 3.2rem; text-align: center; } .featured-content .entry-header { border: none; margin-bottom: 12px; margin-bottom: 1.2rem; } .featured-content .entry-title { margin-bottom: 8px; margin-bottom: 0.8rem; } /* Plugins ---------------------------------------------------------------------------------------------------- */ /* Genesis eNews Extended --------------------------------------------- */ .enews-widget input { margin-bottom: 16px; margin-bottom: 1.6rem; } .enews-widget input[type="submit"] { margin: 0; width: 100%; } .enews-widget input { margin-bottom: 12px; margin-bottom: 1.2rem; } /* Genesis Responsive Slider --------------------------------------------- */ .widget.genesis_responsive_slider li { border: 0; margin-bottom: 0; padding-bottom: 0; } /* Gravity Forms --------------------------------------------- */ div.gform_wrapper input[type="email"], div.gform_wrapper input[type="text"], div.gform_wrapper textarea, div.gform_wrapper .ginput_complex label { font-size: 16px; font-size: 1.6rem; padding: 16px; padding: 1.6rem; } div.gform_wrapper .ginput_complex label { padding: 0; } div.gform_wrapper li, div.gform_wrapper form li { border: none; margin: 16px 0 0; margin: 1.6rem 0 0; } div.gform_wrapper .gform_footer input[type="submit"] { font-size: 14px; font-size: 1.4rem; } /* Jetpack --------------------------------------------- */ img#wpstats { display: none; } /* Site Header ---------------------------------------------------------------------------------------------------- */ .site-header { background-color: #76d2c5; padding: 48px; padding: 4.8rem; overflow: hidden; } /* Title Area --------------------------------------------- */ .title-area { float: left; width: 320px; } .site-title { font-family: 'Roboto Slab', sans-serif; font-size: 50px; font-size: 5rem; line-height: 1; margin: 0 0 16px; margin: 0 0 1.6rem; } .site-title a, .site-title a:hover { color: #fff; text-decoration: none; } .site-description { color: #fff; font-size: 16px; font-size: 1.6rem; line-height: 1; margin: 0; } /* Full width header, no widgets */ .header-full-width .title-area, .header-full-width .site-title { text-align: center; width: 100%; } .header-image .site-description, .header-image .site-title a { display: block; text-indent: -9999px; } .header-full-width.header-image .site-title a { background-position: center !important; margin: 0; } /* Logo, hide text */ .header-image .title-area { padding: 0; } .header-image .site-title a { float: left; min-height: 110px; width: 100%; } /* Widget Area --------------------------------------------- */ .site-header .widget-area { color: #fff; float: right; width: 600px; } .site-header .search-form { float: right; margin-top: 16px; margin-top: 1.6rem; } .site-header .widget-area a { color: #fff; } /* Site Navigation ---------------------------------------------------------------------------------------------------- */ .genesis-nav-menu { clear: both; font-size: 14px; font-size: 1.4rem; line-height: 1; width: 100%; } .genesis-nav-menu .menu-item { display: inline-block; text-align: left; } .genesis-nav-menu a { color: #fff; display: block; padding: 20px 24px; padding: 2rem 2.4rem; position: relative; text-decoration: none; } .genesis-nav-menu > li:hover a, .genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a { background-color: #fff; color: #a5a5a3; } .genesis-nav-menu .sub-menu { left: -9999px; opacity: 0; position: absolute; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 184px; z-index: 99; } .genesis-nav-menu > li:hover .sub-menu a, .genesis-nav-menu .sub-menu a { background-color: #fafafa; color: #a5a5a3; font-size: 12px; font-size: 1.2rem; padding: 16px 24px; padding: 1.6rem 2.4rem; position: relative; width: 184px; } .genesis-nav-menu > li:hover .sub-menu a:hover, .genesis-nav-menu .sub-menu a:hover { background-color: #eeeee8; color: #222; } .genesis-nav-menu .sub-menu .sub-menu { margin: -44px 0 0 183px; } .genesis-nav-menu .menu-item:hover { position: static; } .genesis-nav-menu .menu-item:hover > .sub-menu { left: auto; opacity: 1; } .genesis-nav-menu > .first > a { padding-left: 0; } .genesis-nav-menu > .last > a { padding-right: 0; } .genesis-nav-menu > .right { display: inline-block; float: right; list-style-type: none; padding: 20px 0; padding: 2rem 0; } .genesis-nav-menu > .right > a { background: none; color: #a5a5a3; display: inline; padding: 0; } .genesis-nav-menu > .right > a:hover { color: #76d2c5; } .genesis-nav-menu > .rss > a { margin-left: 48px; margin-left: 4.8rem; } .genesis-nav-menu > .search { padding: 0; } .genesis-nav-menu .search-form input[type="search"] { background-position: 12px 12px; font-size: 12px; font-size: 1.2rem; padding: 12px 12px 12px 44px; padding: 1.2rem 1.2rem 1.2rem 4.4rem; } /* Site Header Navigation --------------------------------------------- */ .site-header .genesis-nav-menu li, .site-header .widget_nav_menu ul ul { border: none; margin: 0; padding: 0; } /* Primary Navigation --------------------------------------------- */ .nav-primary a { color: #a5a5a3; } .genesis-nav-menu > li:hover a, .genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a { color: #222; } /* Secondary Navigation --------------------------------------------- */ .nav-secondary { background-color: #91dbd1; } /* Responsive Menu --------------------------------------------- */ .responsive-menu-icon { cursor: pointer; display: none; text-align: center; } .responsive-menu-icon::before { content: "\f333"; display: inline-block; font: normal 20px/1 'dashicons'; margin: 0 auto; padding: 10px; } .site-header .responsive-menu-icon::before { padding: 0; } /* Content Area ---------------------------------------------------------------------------------------------------- */ /* Home Page --------------------------------------------- */ .lifestyle-pro-home .content .widget { margin-bottom: 32px; margin-bottom: 3.2rem; } .lifestyle-pro-home .featuredpost img { margin-bottom: 20px; margin-bottom: 2rem; } .lifestyle-pro-home .featured-content .entry { margin-bottom: 20px; margin-bottom: 2rem; padding-bottom: 20px; padding-bottom: 2rem; } .lifestyle-pro-home .entry:last-child { margin-bottom: 0; } .home-middle .featuredpost img { margin-bottom: 0; margin-right: 20px; margin-right: 2rem; } .home-bottom-left, .home-bottom-right { width: 332px; } .home-bottom-left { float: left; } .home-bottom-right { float: right; } .lifestyle-pro-home .content .featuredpost p { margin: 0; } .lifestyle-pro-home .content .widget-title { background-color: #76d2c5; color: #fff; padding: 12px 32px; padding: 1.2rem 3.2rem; } /* Entries --------------------------------------------- */ .content .entry { border: 1px solid #eeeee8; margin-bottom: 32px; margin-bottom: 3.2rem; padding: 32px; padding: 3.2rem; } .lifestyle-pro-landing .content .entry { border: none; } .entry-header { border-bottom: 1px solid #eeeee8; margin-bottom: 32px; margin-bottom: 3.2rem; text-align: center; } .entry-content ol, .entry-content p, .entry-content ul, .quote-caption { margin-bottom: 26px; margin-bottom: 2.6rem; } .entry-content ol, .entry-content ul { margin-left: 40px; margin-left: 4rem; } .entry-content ol li { list-style-type: decimal; } .entry-content ul li { list-style-type: circle; } .entry-content ol ol, .entry-content ul ul { margin-bottom: 0; } .entry-meta { font-size: 12px; font-size: 1.2rem; } .entry-header .entry-meta { margin-bottom: 24px; margin-bottom: 2.4rem; } .entry-footer .entry-meta { border-top: 1px solid #eeeee8; margin: 0; padding: 32px 0 8px; padding: 3.2rem 0 0.8rem; } .entry-comments-link::before { content: "\2014"; margin: 0 6px 0 2px; margin: 0 0.6rem 0 0.2rem; } .entry-meta .entry-tags { float: right; } /* Entry Navigation --------------------------------------------- */ .archive-pagination { clear: both; font-size: 14px; font-size: 1.4rem; margin: 40px 0; margin: 4rem 0; } .archive-pagination li { display: inline; } .archive-pagination li a { border: 1px solid #eeeee8; color: #a5a5a3; cursor: pointer; display: inline-block; margin-bottom: 4px; margin-bottom: 0.4rem; padding: 8px 12px; padding: 0.8rem 1.2rem; text-decoration: none; } .archive-pagination li a:hover, .archive-pagination li.active a { color: #76d2c5; } /* Comments --------------------------------------------- */ .ping-list, .entry-comments, .comment-respond { margin-bottom: 40px; margin-bottom: 4rem; } .comment-content { clear: both; } .entry-comments .comment-author { margin-bottom: 0; } .comment-respond input[type="email"], .comment-respond input[type="text"], .comment-respond input[type="url"] { width: 50% } .comment-respond label { display: block; margin-right: 12px; margin-right: 1.2rem; } .comment-list li, .ping-list li { list-style-type: none; margin-top: 24px; margin-top: 2.4rem; padding: 32px; padding: 3.2rem; } .comment-list li li { margin-right: -32px; margin-right: -3.2rem; } .comment { border: 1px solid #eeeee8; border-right: none; } .comment.depth-1 { border-right: 1px solid #eeeee8; } .comment .avatar { margin: 0 16px 24px 0; margin: 0 1.6rem 2.4rem 0; } .form-allowed-tags { background-color: #f8f8f8; font-size: 14px; font-size: 1.4rem; padding: 24px; padding: 2.4rem; } p.subscribe-to-comments { padding: 24px 0 16px; padding: 2.4rem 0 1.6rem; } /* Sidebars ---------------------------------------------------------------------------------------------------- */ .sidebar { font-size: 15px; font-size: 1.5rem; } .sidebar p:last-child { margin-bottom: 0; } .sidebar .widget { border: 1px solid #eeeee8; margin-bottom: 32px; margin-bottom: 3.2rem; padding: 32px; padding: 3.2rem; text-align: center; } .widget li { border-bottom: 1px solid #eeeee8; list-style-type: none; margin-bottom: 12px; margin-bottom: 1.2rem; padding-bottom: 12px; padding-bottom: 1.2rem; } .widget ul ul { border-top: 1px solid #eeeee8; margin-top: 12px; margin-top: 1.2rem; padding-top: 12px; padding-top: 1.2rem; } .widget ul > li:last-child { border: none; margin-bottom: 0; padding-bottom: 0; } /* Footer Widgets ---------------------------------------------------------------------------------------------------- */ .footer-widgets { background-color: #fff; border-top: 1px dotted #eeeee8; clear: both; margin: 0 auto; padding-top: 32px; padding-top: 3.2rem; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { width: 332px; } .footer-widgets-1 { margin-right: 36px; } .footer-widgets-1, .footer-widgets-2 { float: left; } .footer-widgets-3 { float: right; } .footer-widgets .widget { border: 1px solid #eeeee8; margin-bottom: 32px; margin-bottom: 3.2rem; padding: 32px; padding: 3.2rem; text-align: center; } .footer-widgets li { list-style-type: none; margin-bottom: 6px; margin-bottom: 0.6rem; } .footer-widgets .search-form input:focus { border: 1px solid #ddd; } /* Site Footer ---------------------------------------------------------------------------------------------------- */ .site-footer { background-color: #76d2c5; color: #fff; font-size: 12px; font-size: 1.2rem; padding: 36px; padding: 3.6rem; text-align: center; } .site-footer a { color: #fff; text-decoration: none; } .site-footer p { margin-bottom: 0; } /* Theme Colors ---------------------------------------------------------------------------------------------------- */ /* Lifestyle Pro Blue --------------------------------------------- */ .lifestyle-pro-blue .archive-pagination li a:hover, .lifestyle-pro-blue .archive-pagination li.active a, .lifestyle-pro-blue .entry-title a:hover, .lifestyle-pro-blue a { color: #4cc4e0; } .lifestyle-pro-blue .button, .lifestyle-pro-blue .genesis-nav-menu a, .lifestyle-pro-blue .site-footer a, .lifestyle-pro-blue .site-title a, .lifestyle-pro-blue .site-title a:hover { color: #fff; } .lifestyle-pro-blue .entry-title a, .lifestyle-pro-blue .sidebar .widget-title a, .lifestyle-pro-blue .site-footer a:hover, .lifestyle-pro-blue a:hover { color: #222; } .lifestyle-pro-blue .archive-pagination li a, .lifestyle-pro-blue .genesis-nav-menu .current-menu-item > a, .lifestyle-pro-blue .genesis-nav-menu .sub-menu a, .lifestyle-pro-blue .nav-primary a { color: #a5a5a3; } .lifestyle-pro-blue .button, .lifestyle-pro-blue .entry-content .button, .lifestyle-pro-blue .site-footer, .lifestyle-pro-blue .site-header, .lifestyle-pro-blue button, .lifestyle-pro-blue input[type="button"], .lifestyle-pro-blue input[type="reset"], .lifestyle-pro-blue input[type="submit"], .lifestyle-pro-blue.lifestyle-pro-home .content .widget-title { background-color: #4cc4e0; } .lifestyle-pro-blue .button:hover, .lifestyle-pro-blue .entry-content .button:hover, .lifestyle-pro-blue button:hover, .lifestyle-pro-blue input:hover[type="button"], .lifestyle-pro-blue input:hover[type="reset"], .lifestyle-pro-blue input:hover[type="submit"] { background-color: #eeeee8; } .lifestyle-pro-blue .nav-secondary { background-color: #80d2e5; } /* Lifestyle Pro Green --------------------------------------------- */ .lifestyle-pro-green .archive-pagination li a:hover, .lifestyle-pro-green .archive-pagination li.active a, .lifestyle-pro-green .entry-title a:hover, .lifestyle-pro-green a { color: #84cc78; } .lifestyle-pro-green .button, .lifestyle-pro-green .genesis-nav-menu a, .lifestyle-pro-green .site-footer a, .lifestyle-pro-green .site-title a, .lifestyle-pro-green .site-title a:hover { color: #fff; } .lifestyle-pro-green .entry-title a, .lifestyle-pro-green .sidebar .widget-title a, .lifestyle-pro-green .site-footer a:hover, .lifestyle-pro-green a:hover { color: #222; } .lifestyle-pro-green .archive-pagination li a, .lifestyle-pro-green .genesis-nav-menu .current-menu-item > a, .lifestyle-pro-green .genesis-nav-menu .sub-menu a, .lifestyle-pro-green .nav-primary a { color: #a5a5a3; } .lifestyle-pro-green .button, .lifestyle-pro-green .entry-content .button, .lifestyle-pro-green .site-footer, .lifestyle-pro-green .site-header, .lifestyle-pro-green button, .lifestyle-pro-green input[type="button"], .lifestyle-pro-green input[type="reset"], .lifestyle-pro-green input[type="submit"], .lifestyle-pro-green.lifestyle-pro-home .content .widget-title { background-color: #84cc78; } .lifestyle-pro-green .button:hover, .lifestyle-pro-green .entry-content .button:hover, .lifestyle-pro-green button:hover, .lifestyle-pro-green input:hover[type="button"], .lifestyle-pro-green input:hover[type="reset"], .lifestyle-pro-green input:hover[type="submit"] { background-color: #eeeee8; } .lifestyle-pro-green .nav-secondary { background-color: #a2d49a; } /* Lifestyle Pro Mustard --------------------------------------------- */ .lifestyle-pro-mustard .archive-pagination li a:hover, .lifestyle-pro-mustard .archive-pagination li.active a, .lifestyle-pro-mustard .entry-title a:hover, .lifestyle-pro-mustard a { color: #edce4a; } .lifestyle-pro-mustard .button, .lifestyle-pro-mustard .genesis-nav-menu a, .lifestyle-pro-mustard .site-footer a, .lifestyle-pro-mustard .site-title a, .lifestyle-pro-mustard .site-title a:hover { color: #fff; } .lifestyle-pro-mustard .entry-title a, .lifestyle-pro-mustard .sidebar .widget-title a, .lifestyle-pro-mustard .site-footer a:hover, .lifestyle-pro-mustard a:hover { color: #222; } .lifestyle-pro-mustard .archive-pagination li a, .lifestyle-pro-mustard .genesis-nav-menu .current-menu-item > a, .lifestyle-pro-mustard .genesis-nav-menu .sub-menu a, .lifestyle-pro-mustard .nav-primary a { color: #a5a5a3; } .lifestyle-pro-mustard .button, .lifestyle-pro-mustard .entry-content .button, .lifestyle-pro-mustard .site-footer, .lifestyle-pro-mustard .site-header, .lifestyle-pro-mustard button, .lifestyle-pro-mustard input[type="button"], .lifestyle-pro-mustard input[type="reset"], .lifestyle-pro-mustard input[type="submit"], .lifestyle-pro-mustard.lifestyle-pro-home .content .widget-title { background-color: #edce4a; } .lifestyle-pro-mustard .button:hover, .lifestyle-pro-mustard .entry-content .button:hover, .lifestyle-pro-mustard button:hover, .lifestyle-pro-mustard input:hover[type="button"], .lifestyle-pro-mustard input:hover[type="reset"], .lifestyle-pro-mustard input:hover[type="submit"] { background-color: #eeeee8; } .lifestyle-pro-mustard .nav-secondary { background-color: #f5d85a; } /* Lifestyle Pro Purple --------------------------------------------- */ .lifestyle-pro-purple .archive-pagination li a:hover, .lifestyle-pro-purple .archive-pagination li.active a, .lifestyle-pro-purple .entry-title a:hover, .lifestyle-pro-purple a { color: #816689; } .lifestyle-pro-purple .button, .lifestyle-pro-purple .genesis-nav-menu a, .lifestyle-pro-purple .site-footer a, .lifestyle-pro-purple .site-title a, .lifestyle-pro-purple .site-title a:hover { color: #fff; } .lifestyle-pro-purple .entry-title a, .lifestyle-pro-purple .sidebar .widget-title a, .lifestyle-pro-purple .site-footer a:hover, .lifestyle-pro-purple a:hover { color: #222; } .lifestyle-pro-purple .archive-pagination li a, .lifestyle-pro-purple .genesis-nav-menu .current-menu-item > a, .lifestyle-pro-purple .genesis-nav-menu .sub-menu a, .lifestyle-pro-purple .nav-primary a { color: #a5a5a3; } .lifestyle-pro-purple .button, .lifestyle-pro-purple .entry-content .button, .lifestyle-pro-purple .site-footer, .lifestyle-pro-purple .site-header, .lifestyle-pro-purple button, .lifestyle-pro-purple input[type="button"], .lifestyle-pro-purple input[type="reset"], .lifestyle-pro-purple input[type="submit"], .lifestyle-pro-purple.lifestyle-pro-home .content .widget-title { background-color: #816689; } .lifestyle-pro-purple .button:hover, .lifestyle-pro-purple .entry-content .button:hover, .lifestyle-pro-purple button:hover, .lifestyle-pro-purple input:hover[type="button"], .lifestyle-pro-purple input:hover[type="reset"], .lifestyle-pro-purple input:hover[type="submit"] { background-color: #eeeee8; } .lifestyle-pro-purple .nav-secondary { background-color: #8e7197; } /* Lifestyle Pro Red --------------------------------------------- */ .lifestyle-pro-red .archive-pagination li a:hover, .lifestyle-pro-red .archive-pagination li.active a, .lifestyle-pro-red .entry-title a:hover, .lifestyle-pro-red a { color: #e65e52; } .lifestyle-pro-red .button, .lifestyle-pro-red .genesis-nav-menu a, .lifestyle-pro-red .site-footer a, .lifestyle-pro-red .site-title a, .lifestyle-pro-red .site-title a:hover { color: #fff; } .lifestyle-pro-red .entry-title a, .lifestyle-pro-red .sidebar .widget-title a, .lifestyle-pro-red .site-footer a:hover, .lifestyle-pro-red a:hover { color: #222; } .lifestyle-pro-red .archive-pagination li a, .lifestyle-pro-red .genesis-nav-menu .current-menu-item > a, .lifestyle-pro-red .genesis-nav-menu .sub-menu a, .lifestyle-pro-red .nav-primary a { color: #a5a5a3; } .lifestyle-pro-red .button, .lifestyle-pro-red .entry-content .button, .lifestyle-pro-red .site-footer, .lifestyle-pro-red .site-header, .lifestyle-pro-red button, .lifestyle-pro-red input[type="button"], .lifestyle-pro-red input[type="reset"], .lifestyle-pro-red input[type="submit"], .lifestyle-pro-red.lifestyle-pro-home .content .widget-title { background-color: #e65e52; } .lifestyle-pro-red .button:hover, .lifestyle-pro-red .entry-content .button:hover, .lifestyle-pro-red button:hover, .lifestyle-pro-red input:hover[type="button"], .lifestyle-pro-red input:hover[type="reset"], .lifestyle-pro-red input:hover[type="submit"] { background-color: #eeeee8; } .lifestyle-pro-red .nav-secondary { background-color: #f2685c; } /* Media Queries ---------------------------------------------------------------------------------------------------- */ .genesis-nav-menu li, .site-header ul.genesis-nav-menu, .site-header .search-form { float: none; } .genesis-nav-menu, .site-description, .site-footer p, .site-header hgroup, .site-header .search-form, .site-title { text-align: center; } .genesis-nav-menu a { padding: 20px 16px; } .genesis-nav-menu li.alignleft, .genesis-nav-menu li.right { display: none; } .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 { margin: 0; } .genesis-nav-menu.responsive-menu .menu-item:hover { position: static; } .genesis-nav-menu.responsive-menu li.current-menu-item > a, .genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover, .genesis-nav-menu.responsive-menu li a, .genesis-nav-menu.responsive-menu li a:hover { background: none; border: none; display: block; line-height: 1; padding: 20px; text-transform: none; } .genesis-nav-menu.responsive-menu .current-menu-item > a, .genesis-nav-menu.responsive-menu .sub-menu a, .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .genesis-nav-menu.responsive-menu a:hover, .genesis-nav-menu.responsive-menu li:hover > a { 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: "\f140"; float: right; font: normal 20px/1 'dashicons'; height: 20px; padding: 16px 20px; right: 0; text-align: right; z-index: 9999; } .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { content: "\f142"; } .genesis-nav-menu.responsive-menu .sub-menu { background-color: rgba(0, 0, 0, 0.025); border: none; left: auto; opacity: 1; position: relative; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 100%; z-index: 99; } .genesis-nav-menu.responsive-menu .sub-menu .sub-menu { background-color: transparent; margin: 0; padding-left: 25px; } .genesis-nav-menu.responsive-menu > li:hover .sub-menu a:hover, .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .genesis-nav-menu.responsive-menu .sub-menu li a, .genesis-nav-menu.responsive-menu .sub-menu li a:hover { background: none; border: none; padding: 12px 20px; position: relative; text-transform: none; width: 100%; } .nav-primary .genesis-nav-menu.responsive-menu .current-menu-item > a, .nav-primary .genesis-nav-menu.responsive-menu .sub-menu a, .nav-primary .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .nav-primary .genesis-nav-menu.responsive-menu a:hover, .nav-primary .genesis-nav-menu.responsive-menu li:hover > a { color: #222; } .genesis-nav-menu a { font-size: 12px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .search-form input[type="search"] { background-image: url(images/[email protected]); } } @media only screen and (max-width: 1139px) { .footer-widgets, .site-container, .wrap { max-width: 960px; } .content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap { width: 688px; } .content { width: 580px; } .content-sidebar-sidebar .content, .sidebar-content-sidebar .content, .sidebar-sidebar-content .content, .site-header .widget-area { width: 380px; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .home-bottom-left, .home-bottom-right, .sidebar-primary { width: 272px; } } @media only screen and (max-width: 1023px) { .footer-widgets, .site-container, .wrap { max-width: 772px; } .content-sidebar-sidebar .content-sidebar-wrap, .content-sidebar-sidebar .content, .content, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content, .sidebar-primary, .sidebar-secondary, .sidebar-sidebar-content .content-sidebar-wrap, .sidebar-sidebar-content .content, .site-header .widget-area, .title-area { width: 100%; } .site-header { padding: 24px; padding: 2.4rem; } .header-image .site-title a { background-position: center !important; margin: 0 0 16px; margin: 0 0 1.6rem; } .genesis-nav-menu li, .site-header ul.genesis-nav-menu, .site-header .search-form { float: none; } .genesis-nav-menu, .site-description, .site-footer p, .site-header hgroup, .site-header .search-form, .site-title { text-align: center; } .genesis-nav-menu a { padding: 16px; padding: 1.6rem; } .site-header .widget-area { margin-top: 16px; margin-top: 1.6rem; } .site-header .search-form { margin: 16px auto ; margin: 1.6rem auto; } .genesis-nav-menu li.alignleft, .genesis-nav-menu li.right { display: none; } .entry-footer .entry-meta { margin: 0; padding-top: 12px; padding-top: 1.2rem; } .home-bottom-left, .home-bottom-right { width: 332px; } .footer-widgets-1 { margin: 0; } .site-footer { padding: 24px; padding: 2.4rem; } } @media only screen and (max-width: 767px) { body { font-size: 14px; font-size: 1.4rem; } .site-container { padding: 20px 5%; padding: 2rem 5%; width: 94%; } .five-sixths, .four-sixths, .home-bottom-left, .home-bottom-right, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { margin: 0; width: 100%; } .site-title { font-size: 32px; font-size: 3.2rem; } .header-image .site-title a { background-size: contain !important; } .genesis-nav-menu a, .nav-primary .sub-menu a { font-size: 12px; font-size: 1.2rem; padding: 12px; padding: 1.2rem; } .nav-secondary a, .nav-secondary .sub-menu a { font-size: 11px; font-size: 1.1rem; padding: 10px 8px; padding: 1rem 0.8rem; } .genesis-nav-menu .sub-menu .sub-menu { margin: -31px 0 0 199px; } .nav-primary .sub-menu .sub-menu { margin: -36px 0 0 199px; } .entry-meta .entry-tags { clear: both; float: left; } .entry-meta .entry-comments a { margin: 0 0 10px; margin: 0 0 1rem; } .lifestyle-pro-home .featuredpost .alignleft, .lifestyle-pro-home .featuredpost .alignright { float: none; margin: 0 auto; } }You are almost there.
You have to paste the code you copied from the media queries INTO the corresponding media queries of your style.css (e.g. into @media only screen and (max-width: 767px) { )
Like this? I didn´t upload the code yet:
/* Media Queries ---------------------------------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .search-form input[type="search"] { background-image: url(images/[email protected]); } } @media only screen and (max-width: 1139px) { .footer-widgets, .site-container, .wrap { max-width: 960px; } .content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap { width: 688px; } .content { width: 580px; } .content-sidebar-sidebar .content, .sidebar-content-sidebar .content, .sidebar-sidebar-content .content, .site-header .widget-area { width: 380px; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .home-bottom-left, .home-bottom-right, .sidebar-primary { width: 272px; } } @media only screen and (max-width: 1023px) { .footer-widgets, .site-container, .wrap { max-width: 772px; } .content-sidebar-sidebar .content-sidebar-wrap, .content-sidebar-sidebar .content, .content, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content, .sidebar-primary, .sidebar-secondary, .sidebar-sidebar-content .content-sidebar-wrap, .sidebar-sidebar-content .content, .site-header .widget-area, .title-area { width: 100%; } .site-header { padding: 24px; padding: 2.4rem; } .header-image .site-title a { background-position: center !important; margin: 0 0 16px; margin: 0 0 1.6rem; } .genesis-nav-menu li, .site-header ul.genesis-nav-menu, .site-header .search-form { float: none; } .genesis-nav-menu, .site-description, .site-footer p, .site-header hgroup, .site-header .search-form, .site-title { text-align: center; } .genesis-nav-menu a { padding: 20px 16px; } .site-header .widget-area { margin-top: 16px; margin-top: 1.6rem; } .site-header .search-form { margin: 16px auto ; margin: 1.6rem auto; } .genesis-nav-menu li.alignleft, .genesis-nav-menu li.right { display: none; } .entry-footer .entry-meta { margin: 0; padding-top: 12px; padding-top: 1.2rem; } .home-bottom-left, .home-bottom-right { width: 332px; } .footer-widgets-1 { margin: 0; } .site-footer { padding: 24px; padding: 2.4rem; } } @media only screen and (max-width: 767px) { body { font-size: 14px; font-size: 1.4rem; } .site-container { padding: 20px 5%; padding: 2rem 5%; width: 94%; } .five-sixths, .four-sixths, .home-bottom-left, .home-bottom-right, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { margin: 0; width: 100%; } .site-title { font-size: 32px; font-size: 3.2rem; } .header-image .site-title a { background-size: contain !important; } .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 { margin: 0; } .genesis-nav-menu.responsive-menu .menu-item:hover { position: static; } .genesis-nav-menu.responsive-menu li.current-menu-item > a, .genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover, .genesis-nav-menu.responsive-menu li a, .genesis-nav-menu.responsive-menu li a:hover { background: none; border: none; display: block; line-height: 1; padding: 20px; text-transform: none; } .genesis-nav-menu.responsive-menu .current-menu-item > a, .genesis-nav-menu.responsive-menu .sub-menu a, .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .genesis-nav-menu.responsive-menu a:hover, .genesis-nav-menu.responsive-menu li:hover > a { 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: "\f140"; float: right; font: normal 20px/1 'dashicons'; height: 20px; padding: 16px 20px; right: 0; text-align: right; z-index: 9999; } .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { content: "\f142"; } .genesis-nav-menu.responsive-menu .sub-menu { background-color: rgba(0, 0, 0, 0.025); border: none; left: auto; opacity: 1; position: relative; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 100%; z-index: 99; } .genesis-nav-menu.responsive-menu .sub-menu .sub-menu { background-color: transparent; margin: 0; padding-left: 25px; } .genesis-nav-menu.responsive-menu > li:hover .sub-menu a:hover, .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .genesis-nav-menu.responsive-menu .sub-menu li a, .genesis-nav-menu.responsive-menu .sub-menu li a:hover { background: none; border: none; padding: 12px 20px; position: relative; text-transform: none; width: 100%; } .nav-primary .genesis-nav-menu.responsive-menu .current-menu-item > a, .nav-primary .genesis-nav-menu.responsive-menu .sub-menu a, .nav-primary .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .nav-primary .genesis-nav-menu.responsive-menu a:hover, .nav-primary .genesis-nav-menu.responsive-menu li:hover > a { color: #222; } .genesis-nav-menu a { font-size: 12px; } .entry-meta .entry-tags { clear: both; float: left; } .entry-meta .entry-comments a { margin: 0 0 10px; margin: 0 0 1rem; } .lifestyle-pro-home .featuredpost .alignleft, .lifestyle-pro-home .featuredpost .alignright { float: none; margin: 0 auto; } }
- The forum ‘General Discussion’ is closed to new topics and replies.