Community Forums › Forums › Archived Forums › Design Tips and Tricks › Making secondary nav bar full-width in Prose
- This topic has 14 replies, 3 voices, and was last updated 10 years, 7 months ago by
Jamie.
-
AuthorPosts
-
March 30, 2013 at 4:36 pm #32147
Jamie
MemberHi, I am trying to figure out how to make my secondary nav bar full-screen width. I'm using Prose. I read some previous threads, and they mention something about "wrap" but I don't know what that is or how to get to it. Can anyone help, please?
My site is http://www.fromhispresence.com.
Thanks so much!
Jamie
March 31, 2013 at 2:13 pm #32319Susan
ModeratorMarch 31, 2013 at 3:59 pm #32357Jamie
MemberHi Susan,
I see that the link says this:
<?php
// Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
'header',
'nav',
'subnav',
'inner',
'footer-widgets',
'footer'
) );But I don't know what to do with that. Do I paste that in the Custom CSS field? Are there custom parameters I'm supposed to put in somewhere?
Thanks so much,
JamieMarch 31, 2013 at 4:41 pm #32359Susan
ModeratorYou would add the code to your custom functions file.
March 31, 2013 at 6:14 pm #32365Jamie
MemberOk, I have added it, but I don't think it has changed anything yet. Do I need to customize this code?
Thanks!
April 8, 2013 at 9:14 am #33983Jamie
MemberHello again,
I have added the code above but no luck in having it actually change anything. I'd still like to make my main menu bar (which is actually the secondary nav bar) full-screen width. Any help would be very much appreciated. Thanks!
April 8, 2013 at 6:26 pm #34162wendycholbi
MemberWhen I look at your site, I see that the main navigation bar (below the header) does stretch the full width of your site (it's the same width as your header). Were you able to fix this? Or am I misinterpreting your question?
And on a side note, if you're only using the Secondary Navigation because its default location is below the header, you can actually reposition the Primary Navigation below the header (thus letting you take advantage of certain features that are Primary-Navigation-only, like the right-side extras). This forum post discusses how to do that.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
April 9, 2013 at 7:58 am #34259Jamie
MemberHi, I'm wanting the gray menu bar to go all the way across the screen, adjusting to the size of the reader's computer monitor. I don't want the actual menu buttons to move; I just want the blank gray menu bar to continue past the buttons.
An example would be at http://www.moneysavingmom.com. She has her menu bar stretching all the way across the screen, even though the menu buttons stay within the same margins as the header and the content.
Thanks (again) for your help!
Jamie
April 9, 2013 at 3:10 pm #34354wendycholbi
MemberOkay, I see what you're getting at now. Thanks for the example link -- that clarified it a lot for me.
(I'd suggest taking out the code you pasted into functions.php, and as a general rule if you ever need to add a custom function, paste it into Genesis --> Custom Code --> Custom Functions instead.)
I believe this CSS should do what you're asking:
body { width: 100%; } #subnav ul { float: none; margin: 0 auto; width: 970px; } #footer { width: 970px; }
When I add this to your site using Firebug, it appears to work. Let me know if it works for you, OK?
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
April 9, 2013 at 4:07 pm #34381Jamie
MemberHi, I just pasted the code above into Custom Functions. Then the site just showed the text of the code in the location of the primary nav bar, and then when I removed it, the whole site crashed. ?? (I'm using Chrome and it says the server encountered an error and can't reload.)
April 9, 2013 at 4:21 pm #34391Jamie
MemberSo now to get the site back up, I reset the Custom CSS/Functions screen. I pasted the Custom CSS code I had back in afterward and the site is back up again. However, the Custom Functions code I had before, which looked like this:
/** Do not remove this line. Edit functions below. */
add_action( 'genesis_before', 'child_conditional_actions' );
function child_conditional_actions() {if( is_home() || is_front_page() ) { //if page is home page or front page
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );
}
}// Add support for structural wraps
add_theme_support( ‘genesis-structural-wraps’, array(
‘header’,
‘nav’,
‘subnav’,
‘inner’,
‘footer-widgets’,
‘footer’
) );
<?phpcrashes the site again. Can you tell what I might have done wrong? I'd like to have that custom function back because it was hiding the tags on the ends of the posts.
I'm so sorry for all trouble, but I really appreciate your help.
April 10, 2013 at 3:07 pm #34622wendycholbi
MemberI should have clarified that the CSS code I provided above goes into Genesis --> Custom Code --> Custom CSS (but maybe you figured this out?) I'm sure it didn't help that I started my post by talking about CSS, switched to discussing where to paste PHP, and then gave you a chunk of CSS. Sorry about that!
In the Custom Functions field, the problem is that somehow the lines got pasted in in the wrong order. It should look like this:
<?php /** Do not remove this line. Edit functions below. */ add_action( ‘genesis_before’, ‘child_conditional_actions’ ); function child_conditional_actions() { if( is_home() || is_front_page() ) { //if page is home page or front page remove_action( ‘genesis_after_post_content’, ‘genesis_post_meta’ ); } } // Add support for structural wraps add_theme_support( ‘genesis-structural-wraps’, array( ‘header’, ‘nav’, ‘subnav’, ‘inner’, ‘footer-widgets’, ‘footer’ ) );
In short, just move the your very last line to the very top of the Custom Functions field. Let me know if this works!
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
April 12, 2013 at 10:04 am #35010Jamie
MemberHi, I just pasted it in the custom functions field but unfortunately it doesn't appear to have made any difference. I must be doing something wrong?
April 12, 2013 at 12:06 pm #35039wendycholbi
MemberLooks like you need to edit your CSS in Genesis --> Custom Code --> Custom CSS. Right now, it looks like this:
/** Do not remove this line. Edit CSS below. */ .sidebar .widget { margin: 0 0 10px; } #postwidget-2 .postwidgettitle { font-size: 15px; line-height: 19px; margin: 0; } #postwidget-2 .postwidgetinfo { font-size: 12px; line-height: 16px; margin: 0; } /** Do not remove this line. Edit CSS below. */ .sidebar .widget { border: 0px red solid; background: #ffffff; } .post { margin-bottom:15px; } .sidebar .widget { padding-top:1px; padding-bottom:1px; } <?php
There are several issues here:
You haven't actually added the CSS I provided above for your subnav,
There's a <?php line at the end that doesn't belong there,
There is some code that's not needed (zero-pixel red border on sidebar widgets?)
There is some code that can be consolidated (margin and padding on sidebar widgets).To fix these issues, overwrite the entire contents of your Genesis --> Custom Code --> Custom CSS field with this:
/** Do not remove this line. Edit CSS below. */ /***full-width subnav***/ body { width: 100%; } #subnav ul { float: none; margin: 0 auto; width: 970px; } #footer { width: 970px; } /***reduce space between sidebar widgets***/ .sidebar .widget { margin: 0 0 10px; padding: 1px 0; } /***adjust font size in Recent Posts widgets***/ #postwidget-2 .postwidgettitle { font-size: 15px; line-height: 19px; margin: 0; } #postwidget-2 .postwidgetinfo { font-size: 12px; line-height: 16px; margin: 0; } /***adjust space between posts***/ .post { margin-bottom:15px; }
And save changes.
Make sure you are editing the Custom CSS field, NOT the Custom PHP field. Only the code I gave you in this response goes into Custom PHP.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
July 10, 2014 at 5:01 pm #113828Jamie
MemberHi Wendy, you helped me with the thread above awhile back and I'm wondering if you could possibly help me again? The code you listed above worked perfectly. I was only using one menu at the time--the secondary menu, just below the header. Now I am wanting to add the primary menu above the header as well. But I want the primary menu to be regular and centered--not full-width. How do I change the full-width nav bar code above to make it only apply to the secondary menu bar below the header, and not to the primary menu bar above the header?
http://www.fromhispresence.com is my link.
Thank you so much! -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.