How to center primary nav bar but leave secondary nav bar full-width in Prose

Community Forums Forums Design Tips and Tricks How to center primary nav bar but leave secondary nav bar full-width in Prose

This topic is: not resolved

Tagged: 

This topic contains 6 replies, has 2 voices, and was last updated by  Jamie 3 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #114017

    Jamie
    Participant
    Post count: 13

    Hi, I am using Prose. Up until this point, I have only been using the secondary nav bar below the header. Now I want to add in the primary nav bar above the header as well, and put a few menu buttons up there.

    My secondary nav bar is full-width and I want to leave it that way. Someone from this forum provided some custom code awhile back to make that happen. But the problem is that now, when I add the primary nav bar, it also becomes full-width, and my menu buttons show up all the way over to the left side of the screen (in the white space – not over the content area).

    How do I change the custom code to make the primary nav bar appear in its normal spot, left-justified over the wrap area only, and leave the secondary nav bar full-width?

    http://www.fromhispresence.com is my link.
    Thank you so much!

    http://www.fromhispresence.com
    #114046

    braddalton
    Participant
    Post count: 10170
    #114078

    Jamie
    Participant
    Post count: 13

    Thank you. I just tried it. It didn’t work, unfortunately.

    #114084

    Jamie
    Participant
    Post count: 13

    This is the custom code I already have, if it helps:
    /***full-width subnav***/
    body {
    width: 100%;
    }
    #subnav ul {
    float: none;
    margin: 0 auto;
    width: 970px;
    }
    #footer {
    width: 970px;
    }

    #114120

    braddalton
    Participant
    Post count: 10170

    Works for me. I use it on my own site.

    I see you have minified your CSS using a plugin which is why it may not be updating and makes it hard to test with Firebug.

    Also note the CSS in the post i linked to works on HTML 5 themes and not the old themes running XHTML markup.

    In your case try:

    #nav {
        text-align: center;
    }
    

    After you turn off minification.


    #114183

    Jamie
    Participant
    Post count: 13

    Ok, I disabled minification and added the code. I tried it at the top of the Custom Code field and at the end of the other nav bar code. But neither place fixed it. Should I move it somewhere else?
    Thanks for your help!

    #114323

    Jamie
    Participant
    Post count: 13

    Hey! I think I did it! I used different code, and I know NOTHING about coding anything, but it’s sitting back in its proper place with this code (I copied the code you had above and tweaked it a bit based on the custom code I already had):
    #nav {
    float: none;
    margin: 0 auto;
    width: 970px;
    }
    The only problem is that now it added too much white margin between the primary nav bar line and the Hello Bar. Do you happen to know why the header and nav bar would have moved down, and how I can move them back up?
    Thank you so much! :)

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

You must be logged in to reply to this topic.