Forum Replies Created
-
AuthorPosts
-
October 21, 2018 at 5:11 am in reply to: How to change background color for header on mobile #223895NomadGirlMemberThis reply has been marked as private.October 21, 2018 at 5:05 am in reply to: How to change background color for header on mobile #223894NomadGirlMember
In 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:03 am in reply to: How to change background color for header on mobile #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?
-
AuthorPosts