Switching Nav Bar and Grey Line in Vigilance

• 

  jackthevampire · Member · Dec 1, 2011 at 9:16 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  jackthevampire · Member · Dec 1, 2011 at 9:17 pm

  • Copy link

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

• 

  thesacredpath · Member · Dec 1, 2011 at 9:25 pm

  • Copy link

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

• 

  jackthevampire · Member · Dec 1, 2011 at 9:31 pm

  • Copy link

  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.

• 

  jackthevampire · Member · Dec 1, 2011 at 9:32 pm

  • Copy link

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

• 

  jackthevampire · Member · Dec 1, 2011 at 9:33 pm

  • Copy link

  That did it. Thanks again!

• 

  thesacredpath · Member · Dec 1, 2011 at 9:36 pm

  • Copy link

  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;

• 

  jackthevampire · Member · Dec 1, 2011 at 10:00 pm

  • Copy link

  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?

• 

  thesacredpath · Member · Dec 2, 2011 at 12:58 am

  • Copy link

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

  #nav {
  margin-top: 15px;
  }

• 

  jackthevampire · Member · Dec 2, 2011 at 7:00 am

  • Copy link

  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.

• 

  thesacredpath · Member · Dec 2, 2011 at 7:02 am

  • Copy link

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

• 

  jackthevampire · Member · Dec 2, 2011 at 7:19 am

  • Copy link

  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?

• 

  thesacredpath · Member · Dec 2, 2011 at 7:35 am

  • Copy link

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

• 

  jackthevampire · Member · Dec 2, 2011 at 8:01 am

  • Copy link

  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?

• 

  thesacredpath · Member · Dec 2, 2011 at 8:12 am

  • Copy link

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

• 

  jackthevampire · Member · Dec 2, 2011 at 8:20 am

  • Copy link

  check.