Switching Nav Bar and Grey Line in Vigilance

  • Author
    Posts
  • #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.

    #767032

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

    #767035

    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;
    }
    #767036

    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.

    #767039

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

    #767041

    That did it. Thanks again!

    #767046

    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;

    #767064

    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?

    #767127

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

    #nav {
    margin-top: 15px;
    }
    #767203

    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.

    #767205

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

    #767211

    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?

    #767214

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

    #767216

    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?

    #767217

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

    #767218

    check.

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