Forum Replies Created
-
AuthorPosts
-
September 29, 2014 at 8:36 pm in reply to: Wide Screen color bars extended – Mobile Responsive #126212AB2014Member
Hi 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!
September 26, 2014 at 6:47 pm in reply to: Wide Screen color bars extended – Mobile Responsive #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 26, 2014 at 12:20 pm in reply to: Wide Screen color bars extended – Mobile Responsive #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 25, 2014 at 8:15 pm in reply to: Wide Screen color bars extended – Mobile Responsive #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!AB2014MemberThank you so much for your help! That worked perfectly! Now text floats left and the search box form floats right all on the same horizontal space.
-
AuthorPosts