Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to change background color for header on mobile
- This topic has 8 replies, 4 voices, and was last updated 3 years, 3 months ago by incomegame2.
-
AuthorPosts
-
October 21, 2018 at 3:38 am #223889NomadGirlMember
I'm using the Author Pro theme (an older version).
1. Even though my background header image on desktop is yellow, it shows up as black on mobile.
Is there some code I can add to make the header background color yellow on mobile, too? And if yes, where do I put it? 🙂
2. Link text in menus are supposed to appear blue when I hover over them - this works fine for my footer menu, but for my header menu link text is white all the time (i.e. it does not change to blue when I hover over it with my cursor).
Is there some code I can add to make my header link text go blue when I hover my cursor over it? And if yes, where do I put it? 🙂
Thanks in advance to anyone who can help!
October 21, 2018 at 5:03 am #223893NomadGirlMemberFor what it's worth, this is what I've tried so far... (I don't understand css at all, this is just me experimenting and trying to make something work, so apologies if I've done something wrong hehe).
My goal is to make 4 changes (a bit more than in my original post):
-change header background image to yellow #ffdd00 on mobile
-change header menu text to black
-make header menu link change to blue #1e73be when my cursor hovers over it
-on mobile, change the horizontal symbol people can tap (i.e. to make header menu appear) to black1. I went to my WordPress dashboard > Appearance > Customize > Additional CSS
2. I added the following code to that box:
/* # I added because on mobile the header was wrong color */ .site-header > .wrap { background-color: #ffdd22; } /* # I added because I want header menu text to be black */ .genesis-nav-menu a { color: #000000; } /* # I added because HOME link was still white */ .genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #000000; } /* # I added because all header menu items were turning white during hover and I only want one at a time to turn color */ .nav-primary:hover .genesis-nav-menu a { color: #000000; } .nav-primary:hover .genesis-nav-menu a:hover { color: #1e73be; }
In the preview window, everything is perfect (except for the 3-horizonal line symbol you tap on mobile to access nav bar menu).
Then I clicked "Publish".
But on my live site, everything looks the same as it did before, as if I hadn't changed anything - it doesn't match what I see in the preview window when making those edits shown above.
What did I do wrong?
October 21, 2018 at 5:05 am #223894NomadGirlMemberIn case this helps, here is the code for my stylesheet found by going to Dashboard > Appearance > Editor ...
/* Theme Name: Author Pro Theme Theme URI: http://my.studiopress.com/themes/author/ Description: The industry standard for Premium WordPress Themes. Author: StudioPress Author URI: http://www.studiopress.com/ Version: 1.0.0 Tags: black, blue, white, one-column, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready Template: genesis Template Version: 2.1.2 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 - Gallery - Forms - Tables - Structure and Layout - Site Containers - Column Widths and Positions - Column Classes - Common Classes - Avatar - Genesis - Search Form - Titles - WordPress - Widgets - Featured Content - Plugins - Genesis Author Pro - Genesis eNews Extended - Jetpack - Site Header - Title Area - Widget Area - Shrink - Site Navigation - Primary Navigation - Secondary Navigation - Responsive Menu - Content Area - Home - Flexible Widgets - Entries - Entry Meta - After Entry - Pagination - Comments - Sidebars - Footer Widgets - Site Footer - Media Queries - Max-width: 1320px - Max-width: 1200px - Max-width: 980px - Max-width: 800px */ /* # HTML5 Reset ---------------------------------------------------------------------------------------------------- */ /* ## Baseline Normalize --------------------------------------------- */ /* normalize.css v3.0.1 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}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}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}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}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} /* ## Box Sizing --------------------------------------------- */ html, input[type="search"]{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* ## Float Clearing --------------------------------------------- */ .author-box:before, .clearfix:before, .entry:before, .entry-content: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; } .author-box:after, .clearfix:after, .entry:after, .entry-content: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 --------------------------------------------- */ body { background-color: #7a8690; color: #000; font-family: Lato, sans-serif; font-size: 18px; font-weight: 300; line-height: 1.625; margin: 0; } a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea:focus, .button, .gallery img { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } ::-moz-selection { background-color: #000; color: #fff; } ::selection { background-color: #000; color: #fff; } a { color: #0085da; text-decoration: none; } a:hover { color: #000; } p { margin: 0 0 28px; padding: 0; } ol, ul { margin: 0; padding: 0; } li { list-style-type: none; } b, strong { font-weight: 700; } cite, em, i { font-style: italic; } blockquote { margin: 30px; } blockquote::before { color: #e1e9ee; content: "\201C"; display: block; font-size: 60px; font-weight: 400; height: 0; left: -30px; position: relative; top: -16px; } hr { border: 0; border-collapse: collapse; border-top: 1px solid #000; clear: both; margin: 40px 0; } /* ## Headings --------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: "Lato", sans-serif; font-weight: 900; line-height: 1.2; margin: 0 0 10px; } h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 30px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 18px; } /* ## Objects --------------------------------------------- */ embed, iframe, img, object, video, .wp-caption { max-width: 100%; } img { height: auto; } .featured-content img, .gallery img { width: auto; } .featured-content img { margin-bottom: -8px; } /* ## Gallery --------------------------------------------- */ .gallery { overflow: hidden; } .gallery-item { float: left; margin: 0 0 28px; padding: 2px; text-align: center; } .gallery-columns-1 .gallery-item { width: 100%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { width: 20%; } .gallery-columns-6 .gallery-item { width: 16.6666%; } .gallery-columns-7 .gallery-item { width: 14.2857%; } .gallery-columns-8 .gallery-item { width: 12.5%; } .gallery-columns-9 .gallery-item { width: 11.1111%; } .gallery img { border: 1px solid #ddd; height: auto; padding: 4px; } .gallery img:hover { border: 1px solid #999; } /* ## Forms --------------------------------------------- */ input, select, textarea { background-color: #fff; border: 1px solid #ddd; border-radius: 3px; box-shadow: none; color: #000; font-size: 18px; font-weight: 300; padding: 16px; width: 100%; } input:focus, textarea:focus { border: 1px solid #000; outline: none; } input[type="checkbox"], input[type="image"], input[type="radio"] { width: auto; } ::-moz-placeholder { color: #000; font-weight: 300; opacity: 1; } ::-webkit-input-placeholder { color: #000; font-weight: 300; } button, input[type="button"], input[type="reset"], input[type="submit"], .button, .featured-content .more-link { background-color: transparent; border: 1px solid #000; border-radius: 3px; color: #000; cursor: pointer; font-size: 14px; font-weight: 400; line-height: 1.625; padding: 16px 32px; text-align: center; white-space: normal; width: auto; } button:hover, input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], .button:hover, .featured-content .more-link:hover { background-color: #000; color: #fff; } .entry-content .button:hover { color: #fff; } .content .widget-full .featuredpage .button, .content .widget-full .featuredpage .more-link, .footer-widgets button, .footer-widgets input[type="button"], .footer-widgets input[type="reset"], .footer-widgets input[type="submit"], .footer-widgets .button, .footer-widgets .featured-content .more-link { border-color: #fff; color: #fff; } .content .widget-full .featuredpage .button:hover, .content .widget-full .featuredpage .more-link:hover, .footer-widgets button:hover, .footer-widgets input:hover[type="button"], .footer-widgets input:hover[type="reset"], .footer-widgets input:hover[type="submit"], .footer-widgets .button:hover, .footer-widgets .featured-content .more-link:hover { background-color: #fff; color: #000; } button.small, input[type="button"].small, input[type="reset"].small, input[type="submit"].small, .button.small { padding: 8px 16px; } .button { display: inline-block; } .more-link { display: table; margin-top: 30px; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button { display: none; } button:disabled, button:disabled:hover, input:disabled, input:disabled:hover, input[type="button"]:disabled, input[type="button"]:disabled:hover, input[type="reset"]:disabled, input[type="reset"]:disabled:hover, input[type="submit"]:disabled, input[type="submit"]:disabled:hover { background-color: #f2f2f2; border-color: #ddd; color: #777; cursor: not-allowed; } /* ## Tables --------------------------------------------- */ table { border-collapse: collapse; border-spacing: 0; line-height: 2; margin-bottom: 40px; width: 100%; } tbody { border-bottom: 1px solid #fff; } td, th { text-align: left; } td { border-top: 1px solid #fff; padding: 6px 0; } th { font-weight: 400; } /* # Structure and Layout ---------------------------------------------------------------------------------------------------- */ /* ## Site Containers --------------------------------------------- */ .site-inner, .wrap { margin: 0 auto; max-width: 1280px; } .site-inner { background-color: #fff; clear: both; margin-top: 120px; position: relative; z-index: 99; } .featured-widget-area + .site-inner, .landing-page .site-inner { margin-top: 0; } /* ## Column Widths and Positions --------------------------------------------- */ /* ### Content */ .content { float: right; width: 900px; } .content-sidebar .content { float: left; } .full-width-content .content { width: 100%; } .archive.genesis-author-pro .content, .archive.genesis-pro-portfolio .content { padding: 80px 80px 0; } /* ### Primary Sidebar */ .sidebar-primary { float: right; width: 380px; } .sidebar-content .sidebar-primary { float: left; } /* ## 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 ---------------------------------------------------------------------------------------------------- */ /* ## Avatar --------------------------------------------- */ .avatar { border-radius: 50%; float: left; } .alignleft .avatar, .author-box .avatar { margin-right: 24px; } .alignright .avatar { margin-left: 24px; } .comment .avatar { margin: 0 16px 24px 0; } /* ## Genesis --------------------------------------------- */ .breadcrumb { background-color: #f3f3f3; padding: 20px 30px; } .archive-description, .author-box { background-color: #f9f9f9; font-size: 16px; padding: 80px; } .author-box { margin-bottom: 80px; } .author-box-title { font-size: 16px; margin-bottom: 4px; } .archive-description p:last-child, .author-box p:last-child { margin-bottom: 0; } /* ## Search Form --------------------------------------------- */ .search-form { overflow: hidden; } .site-header .search-form { float: right; margin-top: 12px; } .entry-content .search-form, .site-header .search-form { width: 50%; } .entry-content .search-form input { margin-bottom: 16px; } .genesis-nav-menu .search input[type="submit"], .widget_search input[type="submit"] { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; padding: 0; position: absolute; width: 1px; } /* ## Titles --------------------------------------------- */ .archive-title { font-size: 24px; } .entry-title { font-size: 36px; } .entry-title a, .sidebar .widget-title a { color: #000; } .entry-title a:hover { color: #0085da; } .widget-title { font-size: 18px; margin-bottom: 20px; text-transform: uppercase; } /* ## WordPress --------------------------------------------- */ a.aligncenter img { display: block; margin: 0 auto; } a.alignnone { display: inline-block; } .alignleft { float: left; text-align: left; } .alignright { float: right; text-align: right; } a.alignleft, a.alignnone, a.alignright { max-width: 100%; } img.centered, .aligncenter { display: block; margin: 0 auto 24px; } img.alignnone, .alignnone { margin: 0 0 12px; } a.alignleft, img.alignleft, .wp-caption.alignleft { margin: 0 24px 24px 0; } a.alignright, img.alignright, .wp-caption.alignright { margin: 0 0 24px 24px; } .wp-caption-text { font-size: 14px; font-weight: 700; text-align: center; } .entry-content p.wp-caption-text { margin-bottom: 0; } .gallery-caption, .entry-content .gallery-caption { margin: 0; } .wp-audio-shortcode, .wp-playlist, .wp-video { margin: 0 0 28px } /* # Widgets ---------------------------------------------------------------------------------------------------- */ .widget-area .widget { margin-bottom: 40px; word-wrap: break-word; } .widget-area p:last-child, .widget-area .widget:last-child { margin-bottom: 0; } .widget ol > li { list-style-position: inside; list-style-type: decimal; padding-left: 20px; text-indent: -20px; } .widget li li { border: 0; margin: 0 0 0 30px; padding: 0; } .widget_calendar table { width: 100%; } .widget_calendar td, .widget_calendar th { text-align: center; } /* ## Featured Content --------------------------------------------- */ .featured-content .entry { margin-bottom: 20px; padding: 0; } .widget-area .featured-content .entry-header p { margin-bottom: 20px; } .featured-content .entry:after { display: none; } .featured-content .entry:last-of-type { margin-bottom: 0; } .featured-content .entry-title { font-size: 22px; } .featured-content .entry:last-of-type + .widget-title { margin-top: 20px; } .featured-content .aligncenter ~ div, .featured-content .aligncenter ~ header { text-align: center; } .featured-content .aligncenter ~ div .more-link { margin: 20px auto 0; } .content .widget-full .featuredpage { background-color: #181c1e; color: #fff; } .content .widget-full .featuredpage .entry { background-color: rgba(255, 255, 255, 0.05); } .content .widget-full .featuredpage a:hover, .content .widget-full .featuredpage .entry-title a { color: #fff; } .content .widget-full .featuredpage .entry-title a:hover { color: #ccc; } /* # Plugins ---------------------------------------------------------------------------------------------------- */ /* ## Genesis Author Pro --------------------------------------------- */ .archive.genesis-author-pro .archive-description, .archive.genesis-author-pro .breadcrumb, .archive.genesis-pro-portfolio .archive-description, .archive.genesis-pro-portfolio .breadcrumb { margin: -80px -80px 80px; } .archive.genesis-author-pro .archive-pagination, .archive.genesis-pro-portfolio .archive-pagination { margin: 0 -80px; } .archive.genesis-author-pro .content .entry { margin-bottom: 20px; } .archive.genesis-author-pro .entry::after, .archive.genesis-pro-portfolio .entry::after { border-bottom-width: 0; padding-top: 0; } .archive.genesis-author-pro .author-pro-featured-image, .author-pro-featured-image a, .single-books .author-pro-featured-image { position: relative; overflow: hidden; } div .book-featured-text-banner { background-color: #0085da; } .featuredbook .image-aligncenter ~ div, .featuredbook .image-aligncenter ~ header { text-align: center; } .featuredbook .book-price { font-weight: 700; } .single-books .content .book-price { border-bottom: 1px solid #000; } /* ## Genesis eNews Extended --------------------------------------------- */ .enews-widget input { font-size: 16px; margin-bottom: 16px; } .enews-widget input[type="submit"] { margin: 0; width: 100%; } .enews form + p { margin-top: 24px; } /* ## Jetpack --------------------------------------------- */ #wpstats { display: none; } /* # Site Header ---------------------------------------------------------------------------------------------------- */ .site-header { background-color: #7a8690; color: #fff; min-height: 120px; position: fixed; width: 100%; z-index: 498; } /* ## Title Area --------------------------------------------- */ .title-area { float: left; padding: 42px 0; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .site-title { font-size: 30px; font-weight: 900; line-height: 1.2; } .site-title a, .site-title a:hover { color: #fff; } .site-description { display: block; height: 0; text-indent: -9999px; } .site-description, .site-title { margin-bottom: 0; } .header-image .title-area { padding: 25px 0; width: 320px; } .header-image .site-title { display: block; text-indent: -9999px; } .header-image .site-title > a { background-size: contain !important; display: block; float: left; min-height: 70px; width: 100%; } /* ## Shrink --------------------------------------------- */ .shrink { min-height: 0; } .shrink .title-area { padding: 17px 0; } .shrink .genesis-nav-menu li a { padding-bottom: 27px; padding-top: 27px; } .header-image .shrink .title-area { padding: 0; } /* # Site Navigation ---------------------------------------------------------------------------------------------------- */ .genesis-nav-menu { clear: both; font-size: 16px; font-weight: 400; 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: 52px 20px; text-transform: uppercase; } .genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #fff; } .genesis-nav-menu .sub-menu { background-color: #181c1e; left: -9999px; opacity: 0; padding: 10px 0; position: absolute; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; width: 200px; z-index: 499; } .genesis-nav-menu .sub-menu li a { background-color: #181c1e; color: #fff; font-size: 12px; padding: 20px; position: relative; width: 200px; } .genesis-nav-menu .sub-menu .sub-menu { margin: -62px 0 0 199px; } .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 > li.last > a { padding-right: 0; } .genesis-nav-menu .highlight { float: right; } /* ## Primary Navigation --------------------------------------------- */ .nav-primary { float: right; text-align: right; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .nav-primary:hover .genesis-nav-menu a { color: #e1e9ee; } .nav-primary:hover .genesis-nav-menu a:hover { color: #fff; } /* ## Secondary Navigation --------------------------------------------- */ .nav-secondary { background-color: #e1e9ee; display: block; max-width: 1280px; position: absolute; top: 0; width: 100%; z-index: 498; } .nav-secondary .wrap { background-color: rgba(255, 255, 255, 0.3); } .nav-secondary + .content-sidebar-wrap { margin-top: 100px; } .nav-secondary.shrink + .content-sidebar-wrap { margin-top: 70px; } .nav-secondary .genesis-nav-menu a { color: #000; padding: 42px 30px; } .nav-secondary .genesis-nav-menu .sub-menu a { color: #e1e9ee; padding: 20px 40px; } .nav-secondary .genesis-nav-menu a:hover, .nav-secondary .genesis-nav-menu .current-menu-item > a, .nav-secondary .genesis-nav-menu .sub-menu .current-menu-item > a:hover { background-color: #181c1e; color: #fff; } .nav-secondary .genesis-nav-menu .highlight > a { background-color: #0085da; color: #fff; } .nav-secondary .genesis-nav-menu li.highlight > a:hover { background-color: #f5f5f5; color: #000; } .nav-secondary.fixed { position: fixed; top: 70px; } .admin-bar .nav-secondary.fixed { top: 102px; } /* Responsive Menu --------------------------------------------- */ .responsive-menu-icon { cursor: pointer; display: none; margin: 15px auto 10px; text-align: center; } .responsive-menu-icon::before { content: "\f333"; font: normal 20px/1 "dashicons"; margin: 0 auto; } /* # Content Area ---------------------------------------------------------------------------------------------------- */ /* ## Home --------------------------------------------- */ .featured-widget-area { margin-top: 120px; } .featured-widget-area .wrap { background-color: #fff; } .front-page-1, .front-page-3, .front-page-5 { background-color: #f9f9f9; } /* ## Flexible Widgets --------------------------------------------- */ .flexible-widgets { overflow: hidden; padding: 80px 80px 40px; } .widget-area.flexible-widgets .widget { float: left; margin-bottom: 40px; margin-left: 2.564102564102564%; } .flexible-widgets.widget-full { padding: 0; } .flexible-widgets.widget-full .widget { margin-bottom: 0; padding: 80px; } .flexible-widgets.widget-full .widget, .flexible-widgets.widget-halves.uneven .widget:last-of-type { margin-left: 0; width: 100%; } .flexible-widgets.widget-halves .widget { width: 48.717948717948715%; } .flexible-widgets.widget-thirds .widget { width: 31.623931623931625%; } .flexible-widgets.widget-fourths .widget { width: 23.076923076923077%; } .flexible-widgets.widget-fourths .widget:nth-child(4n+1), .flexible-widgets.widget-halves .widget:nth-child(2n+1), .flexible-widgets.widget-thirds .widget:nth-child(3n+1) { clear: left; margin-left: 0; } .widget-full .featured-content .widget-title { background-color: #181c1e; color: #fff; margin: 0; padding: 40px; } .front-page .flexible-widgets.widget-full .widget.featured-content { padding: 0; position: relative; } .widget-full .featured-content .entry { margin: 0; } .widget-full .featured-content .entry-header { padding: 80px 80px 0; } .widget-full .featured-content .entry-content { padding: 0 80px; } .widget-full .featured-content .alignleft, .widget-full .featured-content .alignright { margin: 0 80px 0 0; max-width: 50%; } .widget-full .featured-content .alignright { margin: 0 0 0 80px; } .widget-full .featured-content .entry-title { font-size: 48px; text-transform: uppercase; } .widget-full .featured-content .entry-content p:last-of-type { margin-bottom: 80px; } .content .widget-full .featuredpost { background-color: #e1e9ee; padding: 0; } .widget-full .featuredpost .entry:nth-of-type(even) { background-color: rgba(255, 255, 255, 0.3); } .widget-full .featuredpost ul { padding: 40px; } .widget-full .featuredpost .more-from-category { padding: 0 40px 40px; } /* ## Entries --------------------------------------------- */ .entry { padding: 80px; position: relative; } .entry:after { content: ''; border-bottom: 1px solid #000; bottom: 0; position: absolute; width: 40px; } .content .entry:last-of-type:after { display: none; } .entry-content ol, .entry-content ul { margin-bottom: 28px; margin-left: 40px; } .entry-content ol > li { list-style-type: decimal; } .entry-content ul > li { list-style-type: disc; } .entry-content ol ol, .entry-content ul ul { margin-bottom: 0; } .entry-content code { background-color: #000; color: #f9f9f9; } /* ## Entry Meta --------------------------------------------- */ p.entry-meta { font-size: 16px; margin-bottom: 0; } .entry-header .entry-meta { margin-bottom: 24px; } .entry-categories, .entry-tags, .entry-terms { display: block; } .entry-comments-link::before { content: "\2014"; margin: 0 6px 0 2px; } /* ## After Entry --------------------------------------------- */ .after-entry { padding: 0 80px 80px; } /* ## Pagination --------------------------------------------- */ .pagination { clear: both; } .adjacent-entry-pagination { margin-bottom: 0; } .archive-pagination { background-color: #f5f5f5; padding: 20px 30px; } .archive-pagination li { display: inline; } .archive-pagination li a { color: #000; cursor: pointer; display: inline-block; font-size: 16px; padding: 8px 12px; } .archive-pagination li a:hover, .archive-pagination .active a { color: #0085da; } /* ## Comments --------------------------------------------- */ .comment-respond, .entry-pings { padding: 0 80px 56px; } .entry-comments { padding: 0 80px 80px; } .comment-header { font-size: 16px; } .comment-content { clear: both; word-wrap: break-word; } .comment-list li { margin-top: 24px; padding: 40px 0 0; } .comment-list li li { padding-left: 40px; } .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; } .entry-comments .comment-author { margin-bottom: 0; } .entry-pings .reply { display: none; } .form-allowed-tags { background-color: #f5f5f5; font-size: 16px; padding: 24px; } /* # Sidebars ---------------------------------------------------------------------------------------------------- */ .sidebar { font-size: 16px; } .sidebar li { border-bottom: 1px solid #fff; margin-bottom: 10px; padding-bottom: 10px; } .sidebar p:last-child, .sidebar ul > li:last-child { margin-bottom: 0; } .sidebar .widget { background-color: #e1e9ee; padding: 40px; margin-bottom: 1px; } /* # Footer Widgets ---------------------------------------------------------------------------------------------------- */ .footer-widgets .wrap { background-color: #181c1e; clear: both; padding: 80px; } .footer-widgets { color: #ccc; } .footer-widgets .widget-title, .footer-widgets .wrap a { color: #fff; } .footer-widgets input { border: 1px solid #fff; } .footer-widgets a:hover { color: #0085da; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { width: 320px; } .footer-widgets-1 { margin-right: 80px; } .footer-widgets-1, .footer-widgets-2 { float: left; } .footer-widgets-3 { float: right; } /* # Site Footer ---------------------------------------------------------------------------------------------------- */ .site-footer { color: #ccc; font-size: 16px; line-height: 1; } .site-footer .wrap { background-color: #181c1e; padding: 80px; } .site-footer .wrap a { color: #fff; } .site-footer a:hover { color: #0085da; } .site-footer p { margin-bottom: 0; } /* # Media Queries ---------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 1320px) { .nav-secondary, .site-inner, .wrap { max-width: 1140px; } .content { width: 840px; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .sidebar-primary { width: 300px; } .footer-widgets-1 { margin-right: 40px; } } @media only screen and (max-width: 1200px) { .nav-secondary, .site-inner, .wrap { max-width: 960px; } .content { width: 660px; } .archive.genesis-author-pro .content, .archive.genesis-pro-portfolio .content { padding: 60px 60px 20px; } .flexible-widgets, .widget-full .featured-content .entry-header { padding: 60px 60px 0; } .archive-description, .author-box, .entry, .flexible-widgets.widget-full .widget, .footer-widgets .wrap, .site-footer .wrap { padding: 60px; } .comment-respond, .entry-pings { padding: 0 60px 32px; } .after-entry, .entry-comments { padding: 0 60px 60px; } .widget-full .featured-content .entry-content { padding: 0 60px; } .author-box, .widget-full .featured-content .entry-content p:last-of-type { margin-bottom: 60px; } .archive.genesis-author-pro .archive-description, .archive.genesis-author-pro .breadcrumb, .archive.genesis-pro-portfolio .archive-description, .archive.genesis-pro-portfolio .breadcrumb { margin: -60px -60px 60px; } .archive.genesis-author-pro .archive-pagination, .archive.genesis-pro-portfolio .archive-pagination { margin: 0 -60px; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { width: 260px; } .footer-widgets-1 { margin-right: 30px; } } @media only screen and (max-width: 980px) { .nav-secondary, .site-inner, .wrap { max-width: 800px; } .content, .nav-primary, .sidebar-primary, .site-header .title-area { width: 100%; } .nav-secondary + .content-sidebar-wrap, .site-inner, .featured-widget-area, .nav-secondary.shrink + .content-sidebar-wrap { margin-top: 0; } .site-header { background: none; min-height: 0; } .site-header > .wrap { background-color: #181c1e; } .title-area { padding: 17px 0; } .header-image .title-area { padding: 0; } .header-image .site-title > a { background-position: center !important; } .genesis-nav-menu li, .site-header ul.genesis-nav-menu, .site-header .search-form { float: none; } .genesis-nav-menu, .site-description, .site-header .title-area, .site-header .search-form, .site-title { text-align: center; } .wrap .genesis-nav-menu li a { padding-bottom: 27px; padding-top: 27px; } .admin-bar .nav-secondary.fixed { top: 0; } .front-page-featured, .nav-secondary, .nav-secondary.fixed, .site-header, .widget-full .featured-content .alignleft, .widget-full .featured-content .alignright { position: relative; } .archive-description, .author-box, .entry, .flexible-widgets.widget-full .widget, .footer-widgets .wrap, .site-footer .wrap { padding: 40px; } .archive.genesis-author-pro .content, .archive.genesis-pro-portfolio .content, .flexible-widgets, .widget-full .featured-content .entry-header { padding: 40px 40px 0; } .after-entry, .entry-comments, .widget-full .featured-content .entry-content { padding: 0 40px 40px; } .comment-respond, .entry-pings { padding: 0 40px 12px; } .author-box { margin-bottom: 40px; } .widget-full .featured-content .alignleft, .widget-full .featured-content .alignright { background-color: #fff; display: block; float: none; margin: 0 auto; max-width: 100%; text-align: center; width: 100%; } .widget-full .featuredbook .author-pro-featured-image, .widget-full .featured-content .entry-content p:last-of-type { margin-bottom: 0; } .archive.genesis-author-pro .archive-description, .archive.genesis-author-pro .breadcrumb, .archive.genesis-pro-portfolio .archive-description, .archive.genesis-pro-portfolio .breadcrumb { margin: -40px -40px 40px; } .archive.genesis-author-pro .archive-pagination, .archive.genesis-pro-portfolio .archive-pagination { margin: 0 -40px; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { width: 220px; } } @media only screen and (max-width: 800px) { body { font-size: 16px; } .wrap { padding-left: 5%; padding-right: 5%; } .featured-widget-area .wrap { padding: 0; } .archive-pagination li a { margin-bottom: 4px; } .archive.genesis-author-pro .content .archive.genesis-pro-portfolio .content, .entry, .five-sixths, .flexible-widgets.widget-fourths .widget, .flexible-widgets.widget-halves .widget, .flexible-widgets.widget-thirds .widget, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { margin-left: 0; width: 100%; } .nav-primary .wrap { padding: 0; } .genesis-nav-menu.responsive-menu { display: none; float: none; padding-bottom: 20px; } .genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon { display: block; } .genesis-nav-menu.responsive-menu .menu-item:hover { position: static; } .menu.genesis-nav-menu.responsive-menu li.current-menu-item > a, .menu.genesis-nav-menu.responsive-menu li a, .menu.genesis-nav-menu.responsive-menu li a:hover, .menu.genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover, .nav-secondary .menu.genesis-nav-menu.responsive-menu .sub-menu a { background: none; display: block; padding: 10px 0; text-transform: none; } .nav-secondary .genesis-nav-menu.responsive-menu li a, .nav-secondary .genesis-nav-menu.responsive-menu li a:hover, .nav-secondary .genesis-nav-menu.responsive-menu .sub-menu a { color: #000; } .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 20px/1 "dashicons"; height: 20px; padding: 7px 20px; right: 0; text-align: right; z-index: 499; } .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { content: "\f343"; } .genesis-nav-menu.responsive-menu > .menu-item > .sub-menu { display: none; } .genesis-nav-menu.responsive-menu .sub-menu { background: none; left: auto; opacity: 1; position: relative; width: 100%; } .genesis-nav-menu.responsive-menu .sub-menu .sub-menu { margin: 0 auto; padding: 0 0 0 20px; } .genesis-nav-menu .highlight { float: none; } .nav-secondary .genesis-nav-menu li.highlight > a, .nav-secondary .genesis-nav-menu li.highlight > a:hover { background: none; color: #000; } .flexible-widgets { padding: 40px; } .widget-full .featured-content .entry-title { font-size: 36px; } .footer-widgets .wrap { padding: 40px 40px 0; } .footer-widgets .widget:last-child { margin-bottom: 40px; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { width: 100%; } }
October 21, 2018 at 5:11 am #223895NomadGirlMemberThis reply has been marked as private.July 6, 2019 at 2:44 am #492154gringorjonesMemberI'm having the same problem with this theme. I've updated my CSS with @media code from studiopress support. The issue shows as resolved when I'm on my laptop using responsive design mode, but there's no change on my actual phone (tried two browsers).
Any ideas?
July 6, 2019 at 2:55 am #492156gringorjonesMemberIn fact, it was fixed! Just took time to show on my phone.
If anyone else has this problem, here's the code I added to the CSS (you just need to replace #008080 with your colour):
@media only screen and (max-width: 980px) {.site-header > .wrap {
background-color: #008080;
}.menu-toggle, .sub-menu-toggle {
background-color: #008080;
}
}January 7, 2021 at 2:17 am #502523realdigitale01ParticipantI have the same problem with my theme Aspire pro.
I want to have a color menu in mobile like the menu on the desktop.
In desktop is white, in mobile black.
Please help me
ThanksJanuary 7, 2021 at 3:19 am #502524realdigitale01ParticipantHi,
I tryed to change these rows:
.site-header > .wrap {
background-color: #fff;
} in row 1196.menu-toggle, .sub-menu-toggle {
background-color: #fff;
} in row 1362This is my site http://www.realdigitale.it
It doesn't work, in mobile the wrap color menu is still black.
Please, help meJanuary 15, 2021 at 9:02 pm #502656incomegame2ParticipantAvid gamers like seeking to exploit concerns in games every once gametesterinfo tips in awhile.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.