Switching Nav Bar and Grey Line in Vigilance

  • Author
  • #766915

    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.


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


    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;

    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.


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


    That did it. Thanks again!


    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;


    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?


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

    #nav {
    margin-top: 15px;

    Thank you so much!

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

    #nav {

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


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


    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?


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


    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?


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



The topic ‘Switching Nav Bar and Grey Line in Vigilance’ is closed to new replies.