Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Switching Nav Bar and Grey Line in Vigilance

  1. jackthevampire
    Member

    I've been trying to hunt down the CSS code to help me do this but haven't been able to find anyone else on the net who's tried, I hope it's not so simple I'm missing it. Anyway, I was wondering if someone here could help me out.

    I'd like to switch the gray line and the nav bar in my Vigilance themed blog (address below), so that it's my header first, then below it the gray line, then the nav bar hanging below it rather than above it. Is that possible?

    Bonus: If it's possible to do so, is it also possible to have the hover lines currently over the nav bar to be moved to under it? So when the pointeer goes over "Home", the hover line appears below it rather than above it?

    For my blog here: http://swungover.wordpress.com/

    The blog I need help with is swungover.wordpress.com.

  2. jackthevampire
    Member

    So, basically, I want to move the grey line above the nav bar.

  3. thesacredpath
    Member

    Line on bottom of image.

    #header {
border-bottom: none;
}

#title {
border-bottom: 5px solid #333333;
}

    The bonus:

    #nav ul li a:hover, #nav ul li:hover > a, #nav ul li.current_page_item > a, #nav ul li.current_page_parent > a, #nav ul li.current_page_ancestor > a, #nav ul li.current-cat > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent a {
border-bottom: 4px solid #792024;
border-top: none;
padding-bottom: 5px;
}

  4. jackthevampire
    Member

    Wow. You are a ninja.

    One last thing: is there an easy way to give a few pixels of white space between the gray line and the header image so it doesn't look so smooshed against it?

    And thank you so much for your fast and incredibly spot-on reply.

  5. jackthevampire
    Member

    Actually, I imagine I could maybe drop in a padding-top into the first collection of coding you gave me.

  6. jackthevampire
    Member

    That did it. Thanks again!

  7. thesacredpath
    Member

    You are welcome, and the easiest way to add a little space between the line and the image is to increase the height of the div that the image is in (#title) which is currently 180px. Add the following to #title and adjust as you see fit.

    height: 185px;

  8. jackthevampire
    Member

    Ah, that is was easy as well.

    So the nav bar is now below the line, however, it's a few pixels lower than I 'd like it. I tried looking through the nav bar code you gave me to see if I could adjust that, but didn't see anything. Any recommendations?

  9. thesacredpath
    Member

    To move it up, edit the top margin value in #nav (15px is what it is now).

    #nav {
margin-top: 15px;
}

  10. jackthevampire
    Member

    Thank you so much!

    For those following along, I also bolded it and was really pleased with the results:

    #nav {
    margin-top:3px;
    font-weight:bold;
    }

    Thanks Sacredpath. I have another issue that I think requires a new thread.

  11. thesacredpath
    Member

    You are welcome and I'll watch for the new thread.

  12. jackthevampire
    Member

    Oh, yeah...so when I switched the nav bar and gray line, there suddenly was a largish space below the nav bar and above the first post header.

    Any idea why that happened, and how to possibly fix it?

  13. thesacredpath
    Member

    Don't work directly with h1 or h2, work with the specific selectors for the different elements that use h1 or h2. The 30px of padding top and 15px of padding bottom you added directly to h1 made the title div expand in height and caused the line and the menu to shift down by 45px (30px + 15px).

  14. jackthevampire
    Member

    Actually, I think it was this: The gray line was lower then, so the post was snuggled right under it. Now the grey line is higher, and the nav bar is lower, and so there's extra white space.

    So I guess now the question is, can I move up the posts in order to take up some of that white space, even though the nav bar is there on the right?

  15. thesacredpath
    Member

    Let's take this into the other thread you started.

  16. jackthevampire
    Member

    check.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags