Making secondary nav bar full-width in Prose

Community Forums Forums Design Tips and Tricks Making secondary nav bar full-width in Prose

This topic is: not resolved

This topic contains 14 replies, has 3 voices, and was last updated by  Jamie 3 weeks, 1 day ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #32147

    Jamie
    Participant
    Post count: 13

    Hi, 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

    #32319

    Susan
    Moderator
    Post count: 7991

    Try here:

    Brian’s Gardner’s guide to structural wraps


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #32357

    Jamie
    Participant
    Post count: 13

    Hi 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,
    Jamie

    #32359

    Susan
    Moderator
    Post count: 7991

    You would add the code to your custom functions file.


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #32365

    Jamie
    Participant
    Post count: 13

    Ok, I have added it, but I don’t think it has changed anything yet. Do I need to customize this code?

    Thanks!

    #33983

    Jamie
    Participant
    Post count: 13

    Hello 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!

    #34162

    wendycholbi
    Participant
    Post count: 120

    When 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

    #34259

    Jamie
    Participant
    Post count: 13

    Hi, 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

    #34354

    wendycholbi
    Participant
    Post count: 120

    Okay, 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:

    [css]

    body {
    width: 100%;
    }
    #subnav ul {
    float: none;
    margin: 0 auto;
    width: 970px;
    }
    #footer {
    width: 970px;
    }[/css]

    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

    #34381

    Jamie
    Participant
    Post count: 13

    Hi, 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.)

    #34391

    Jamie
    Participant
    Post count: 13

    So 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’
    ) );
    <?php

    crashes 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.

    #34622

    wendycholbi
    Participant
    Post count: 120

    I 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]

    <?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’
    ) );[/php]

    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

    #35010

    Jamie
    Participant
    Post count: 13

    Hi, 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?

    #35039

    wendycholbi
    Participant
    Post count: 120

    Looks like you need to edit your CSS in Genesis –> Custom Code –> Custom CSS. Right now, it looks like this:

    [css]

    /** 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[/css]

    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:

    [css]

    /** 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;
    }[/css]

    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

    #113828

    Jamie
    Participant
    Post count: 13

    Hi 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!

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.