Crystal Navigation Shifting

Community Forums Forums Design Tips and Tricks Crystal Navigation Shifting

This topic is: not resolved

This topic contains 12 replies, has 4 voices, and was last updated by  seminolecrew 1 year, 5 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #3234

    seminolecrew
    Participant
    Post count: 15

    Hello, my site is…

    http://www.cpluscreative.com/wordpress

    If you notice, as I just started working on my navigation, it is shifting from the top. Can you let me know what I need to change to fix this? Thanks so much.

    Corey

    #3387

    seminolecrew
    Participant
    Post count: 15

    Any help would be appreciated…

    #13887

    seminolecrew
    Participant
    Post count: 15

    Does anyone even offer help or assistance anymore? Seems like I am going to have to switch to a whole new template because I cant get anything answered.

    #13900

    Susan
    Moderator
    Post count: 7985

    Part of the reason why your post may not have been responded to is that you replied to it, thereby not being “searchable” when people are looking for unanswered posts to respond to – there is a way to easily search for “unanswered posts”.

     

    In looking at your site (in Chrome), I’m not sure what you are asking, or what you are seeing that is wrong.  I’m seeing a large box which is covering part of your site title – is that what you are referring to? I’ll be happy to take a look if I knew what it is you need help with.

    Did you want your navigation to be in the Header Right as shown on the demo? If so, follow the instructions for setting up the menu:

    Setting up the Menu

    In this theme, disable the Primary and Secondary Navigation under Genesis Settings -> Navigation.

    Created a menu under Appearance -> Menus.

    Note that drop-down menu items are created by placing those menu item indented over to the right.

    Now visit Appearance -> Widgets, and drag the Custom Menu widget to Header Right. Choose the menu you just created.

     

     


    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

    #22752

    seminolecrew
    Participant
    Post count: 15

    Thank you for answering Susan, and your comment is noted about submitting something one time until someone answers. Appreciate your help. I did what you had recommended, and the navigation is still not laying out the same way the demo looks. Apparently something is off.

    http://www.cpluscreative.com/wordpress

    Any help would be appreciated.

    #22759

    Kraft
    Participant
    Post count: 86

    It looks like the width of your header is too big. It’s at 400px now, knocking it down to 350px knocks the menu back up (the demo width is at 320px).


    Brandon Kraft
    Volunteer
    Blog | Twitter | Business
    Genesis eNews Extended Support

    #22760

    Kraft
    Participant
    Post count: 86

    Should clarify – the width of your title-area per the style rule in the html of your site itself (.header-image #header #title-area { width: 400px…..)


    Brandon Kraft
    Volunteer
    Blog | Twitter | Business
    Genesis eNews Extended Support

    #22762

    seminolecrew
    Participant
    Post count: 15

    I’m not seeing anywhere in the style where it is listed at 400 px. Am I missing something?

    /***** Header ********************/

    #header {
    width: 960px;
    height: 120px;
    }

    #title-area {
    width: 350px;
    float: left;
    padding: 20px 0 0 0;
    overflow: hidden;
    }

    #title-area #title {
    font-size: 24px;
    font-weight: normal;
    line-height: 30px;
    margin: 0;
    padding: 0;
    }

    #title-area #title a, #title-area #title a:hover {
    color: #333333;
    text-decoration: none;
    }

    #title-area #description {
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    margin: 0;
    }

    #header .widget-area {
    width: 600px;
    float: right;
    padding: 30px 0 0 0;
    }

    #header .widget-area p {
    margin: 0;
    padding: 0 0 5px 0;
    }

    /***** Image Header – Partial Width ********************/

    .header-image #header #title-area {
    background: url(images/logo.png) center top no-repeat;
    }

    .header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
    display: block;
    float: left;
    width: 320px;
    height: 120px;
    padding: 0;
    text-indent: -9999px;
    overflow: hidden;
    }

    .header-image #title-area #description {
    display: block;
    overflow: hidden;
    }

    #22766

    Susan
    Moderator
    Post count: 7985

    Your header width is set to 960px.

    Your #header.widget-area and title area with their accompanying padding is pushing the width to over 960px.

    Try adjusting your #header.widget-area down by 30px.

     

    (Thanks to @bradleypotter on Twitter for pointing this out to me!)

     

    Edited to clarify…


    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

    #22768

    Kraft
    Participant
    Post count: 86

    Check out the HTML source code. There is a single style rule after the title and before the meta. I’m not exactly sure where that is coming from—perhaps the Genesis->Theme Settings->Header Scripts?

    Perhaps a plugin or something in functions.php too. In either case, just tweaking that bit of CSS does it.

    Edited to include the following:

    Here’s a screenshot of everything:

    http://picpaste.com/pics/hardcoded-css-PtM7iOr4.1361829536.png

    On the far left, you can see the 400px in the source code, in the inspector window next to it, I’ve changed it to 360px (361 and larger causes the issue). The right side shows the website with 360px title-area.


    Brandon Kraft
    Volunteer
    Blog | Twitter | Business
    Genesis eNews Extended Support

    #22770

    seminolecrew
    Participant
    Post count: 15

    I messed with the widget area dimensions. That seemed to snug it up. Thanks.

    #22773

    Brad
    Participant
    Post count: 33

    I was incorrect about the padding adding to the problem but yes changing the widget area dimensions fixes it. I further inspected your source code and noticed this:

    <title>Blog — Just another WordPress site</title>
    <style type=”text/css”>
    .header-image #header #title-area {
    width: 400px;
    height: 120px;
    background: url(http://cpluscreative.com/wordpress/wp-content/uploads/2012/10/logocopy.png) no-repeat!important;
    }
    </style>

    So with that logo image being 400px wide you have to make sure the remaining width allotted for the header widget area doesn’t exceed 560px

    The logo has a lot of extra space to the right of it so you could crop it to free up more width for the header widget area and adjust the CSS accordingly.

    #22774

    seminolecrew
    Participant
    Post count: 15

    Thank you!

     

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

You must be logged in to reply to this topic.