Community Forums › Forums › Archived Forums › Design Tips and Tricks › Help Adjusting Settings for Header Width
- This topic has 3 replies, 2 voices, and was last updated 8 years, 4 months ago by Victor Font.
-
AuthorPosts
-
November 24, 2015 at 10:10 pm #171968raccoonincognitoMember
Relatively new to the Genesis framework, and hoping to get a bit of help finding all the parameters I need to modify. I'm using the Author Pro theme.
Here's the site in question, if you'd like to check it out.
You'll notice if you resize the window, it adjusts the header from normal (full width) to stacked (medium width) to mobile (narrow width) as you'd expect. I'd like to fix two things:
1. I want to to go to stacked at a wider width than it does now, because the trigger makes the iPad version of the site look strange horizontally.
2. I'd like to fix the color; when it goes to stacked or mobile, the header turns from green to black background.Hoping someone has a quick answer so I make sure I catch all the edits I need to. Thanks in advance!
November 25, 2015 at 8:00 am #171993Victor FontModeratorLook in the media queries. This URL should help: http://www.studiopress.com/responsive/
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?November 25, 2015 at 9:07 pm #172026raccoonincognitoMemberThanks Victor; that was quite helpful. I got the dynamic sizing fixed, but I've tried all sorts of things to get the color fixed and haven't been able to figure it out. Here's the second size, as an example.
@media only screen and (max-width: 1100px) { .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; }
Looking at it in Chrome's inspector, I can disable
.site-header > .wrap { background-color: #181c1e;
and the coloring is correct. But changing the hex here to the right color, or deleting the element outright, don't change anything loading the site.
(Sorry if this is a horribly simple question; I was an HTML guy back in the late 1990s but have been out of development for about a decade now, so CSS (especially in its current state) is a bit foreign).
December 3, 2015 at 6:20 pm #172656Victor FontModeratorThe background color is in style.css at line 1711
.site-header > .wrap { background-color: #181C1E; }
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet? -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.