Community Forums › Forums › Archived Forums › Design Tips and Tricks › Wide Screen color bars extended – Mobile Responsive
- This topic has 8 replies, 2 voices, and was last updated 9 years, 6 months ago by AB2014.
-
AuthorPosts
-
September 25, 2014 at 9:32 am #125671AB2014Member
Question: How can I adjust the depth of the pseudo elements I've used to extended color bands for my header, primary menu and secondary menu in the footer area of my site http://www.pilgrimsrock.com to adjust with mobile responsiveness changes in screen real estate size?
Here are screen shots of the issues:
http://pilgrimsrock.com/wp-content/uploads/2014/09/Wide-Screen-Color-Bars-Mobile-Responsiveness.pdfMy Executive Pro Genesis child theme Style.css code: - using Pseudo elements on ‘html’ and ‘body’:
/* Add background color sections to the far left/right of main content area of web site to allow color to extend all the way out to the sides of a wide screen for header, primary menu and secondary menu footer AB 9-11-14 */
html::before {
content: "";
display: block;
position: absolute;
top: 0;
min-width: 100%;
z-index: -1;
height: 10.5%; /* 100px change me */
background: #820000; /* change me */
}
/* this extends the custom red color across the whole header area AB 9-11-14 */body::before {
content: "";
display: block;
position: absolute;
top: 100px;
min-width: 100%;
z-index: -1;
height: 5.5%; /* 54px change me */
background: #eee6cb; /* change me */
}
/* this extends the menu color across the whole primary menu area AB 9-11-14 */html::after {
content: "";
display: block;
position: relative;
min-width: 100%;
z-index: -1;
height: 54px; /* change me */
margin-top:-80px; /* change me */
background: #eee6cb; /* change me */
}
/* this extends the menu color across the whole footer secondary menu area AB 9-11-14 */I've tried changing the elements as follows in each style.css pseudo element section but nothing seems to happen at all.
- height in the HTML::before
- top and height in the BODY::before
- height and margin-top in the HTML::afterI am using the same code as above but changing the elements to different value at each place in the style.css where the mobile responsive code calls for changes.
Example:
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 800px) {
}
and so forth until the max-width: 270px section.Are pseudo elements not capable of changing once they are used once? Is there a better way to create these extended color sections (to show on very wide browser screens) than using pseudo elements? Any suggestions? My goal is to extend the color in the header, primary menu and secondary menu in the footer area with very wide screens and then to make those color bars respond and adjust to the changes as the mobile responsive code makes adjustments.
Thanks for your help anyone!
http://www.pilgrimsrock.comSeptember 25, 2014 at 6:23 pm #125740MarcyParticipantYou have:
.site-container { max-width: 960px; } .site-container { margin: 0 auto; max-width: 1140px; }
Comment that all out and use:
.site-container { width: 100%; }
Then for your theme, below the .site-container, you would add:
.site-inner, .wrap { margin: 0 auto; max-width: 1140px; } .site-inner { clear: both; padding-top: 40px; }
Well, you can adjust the padding-top on .site-inner, if you don't need it.
Then you can style .site-header, .nav-primary, .footer-widgets for full-width. If needed, add
width: 100%;
to them.You will need to adjust your @media accordingly.
Marcy | Amethyst Website Design | Twitter
September 25, 2014 at 8:15 pm #125755AB2014MemberHi Marcy,
Thank you so much! I had been researching for two days to figure this out and your fixes worked with one additional question you may be able to help me with.
The other two "elements" that have defined pixel widths are:
.content {
float: right;
width: 800px;
padding: 20px 10px 10px;
}.sidebar-primary {
background-color: #e9e6df;
float: right;
width: 340px;
}These seem to define the total width of the "next layer in" from the .site-inner (which you helped me find/figure out - thank you again!). I've been searching to figure out how to use your code logic to now define both of these elements as width: 100%; and then use something like the hook (is that the correct term?) ".site-inner" to define the max-width value in pixels (like your first solution did).
I've cross checked my primary and secondary navigation CSS and put them both to width: 100%; but no change so I'm wondering if they are "inside" the "next layer in" constrained by the .content { } and .sidebar-primary { } definitions.
Any more suggestions or directions you can point me to? I so appreciate your help as I'm only 1 month into using WordPress/Genesis and so grateful for the forums and help given in the community.
Thanks!
P.S. I was also able to apply your logic and code to the @media areas and they are working just fine too!September 25, 2014 at 10:09 pm #125763MarcyParticipantLeave the widths of .content and .sidebar alone. They work the way they are.
I can't see your site now, but you you may just not have a background-color on .nav-primary
.nav-primary { background-color: #ff0000; /* This is red; add your color here */ width: 100%; overflow: auto; /* add this if adding the background-color still doesn't show anything */ }
Marcy | Amethyst Website Design | Twitter
September 26, 2014 at 12:20 pm #125843AB2014MemberHi Marcy,
Thanks for your help and I'm sorry I had the site down overnight. I examined the navigation cods in CSS and made sure width, overflow, and background were all defined. Still no change. If you have any more ideas, I'd love to hear them. Thanks again for your help!!
September 26, 2014 at 12:35 pm #125850MarcyParticipantI don't see a background-color on .nav-primary for the large scree size at the top.
Please add, as I posted above:
.nav-primary { background-color: #ff0000; /* This is red; add your color here */ width: 100%; overflow: auto; /* add this if adding the background-color still doesn't show anything */ }
Marcy | Amethyst Website Design | Twitter
September 26, 2014 at 6:47 pm #125883AB2014MemberHi Marcy,
I did add the above code as you asked to the .nav-primary (and it is now working as of 4PM EST) (but it is down further in the file under the "Primary Navigation" section):
/* Primary Navigation
--------------------------------------------- */(some code here...)
.nav-primary {
width: 100%;
background-color: #eee6cb;
overflow: auto;
}And here is the code for the secondary menu (that is still not working); observations on the secondary menu which now is the only area I'm still having issues with (1. seems I can define the width in pixels and the secondary menu in the footer moves out (with the buttons and all) to the right side (no movement to the left at all). 2. I can change the text from upper to lower case, and know this code below does control the secondary menu - at least to some extent):
/* Secondary Navigation
--------------------------------------------- */.nav-secondary .genesis-nav-menu li:hover,
.nav-secondary .genesis-nav-menu a:hover {
background: #820000;
color: #fff;
text-decoration: none;
}
/* controls the button background and text color during hover behavior AB 9-11-14 */.nav-secondary {
width: 100%;
background-color: #eee6cb;
overflow: auto;border: 2px solid black
}(I've added the border just for testing so I can see what is happening on the menu)
I looked in the function.php of the Executive Pro child theme and know that the secondary menu was removed from the other elements of the child theme and placed in the footer (as this code indicates):
//* Reposition the secondary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_footer', 'genesis_do_subnav', 7 );So, my thoughts are that the secondary menus width and placement at center in the footer are inheriting values from somewhere else in the footer (I've searched all the references to the secondary menu in the style.css and no others seems to have any related importance). I've tried adding width: 100% !important: but that did not do anything.
Any thoughts on what to try next? Thank you so much for your time and assistance!!
September 27, 2014 at 12:42 am #125916MarcyParticipant.nav-secondary was added inside the .site-footer .wrap when it was moved, so that's it's size in that position.
If you want it outside the .wrap, you need to modify the code in functions.php
Change this//* Reposition the secondary navigation menu remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ ); add_action( ‘genesis_footer’, ‘genesis_do_subnav’, 7 );
to this:
//* Reposition the secondary navigation menu remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ ); add_action( ‘genesis_before_footer’, ‘genesis_do_subnav’, 7 );
That should work with the CSS you posted
.nav-secondary { width: 100%; background-color: #eee6cb; overflow: auto; border: 2px solid black }
Marcy | Amethyst Website Design | Twitter
September 29, 2014 at 8:36 pm #126212AB2014MemberHi Marcy,
The ideas you posted did not work exactly the way I needed for mobile responsiveness (or probably what I did after the secondary menu was moved out of the footer and the way I tried to style the menu were not correct).
Nonetheless, I had more ideas from what you suggested and was finally able to get the secondary footer full width in the footer.
Thank you so much for your patience and suggestions and help in giving me code and logic to work with. I learned a lot from you and hope I can be of some help to others in the future as I grow in my skills. Thanks so much for all your help!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.