moving navigation bar in Pressrow theme

• 

  littleh · Member · Jan 20, 2009 at 3:54 am

  • Copy link
  • Add topic to favorites

  hello, i have the css upgrade and would like to know if i can move the navigation bar to appear below the custom header in the pressrow theme. if so, how? thanks. http://www.hhconsulting.wordpress.com

• 

  thesacredpath · Member · Jan 20, 2009 at 4:51 am

  • Copy link

  This is probably going to take our only volunteer CSS expert, devblog, and we never know when he is going to show up. He does look in the CSS forum for new questions and problems, but it may take a day before he gets back to you.

• 

  littleh · Member · Jan 20, 2009 at 5:00 am

  • Copy link

  thanks, i guess i’ll cultivate some patience then : )

• 

  littleh · Member · Jan 20, 2009 at 6:20 am

  • Copy link

  also, can devblog help me with making the page content flush with the sidebar headers? i.e. front page photo is not flush with the word “storefront”?

  i already removed the h2 from the the page content (i.e. “welcome”) so there is nothing impeding the image and text from “testimonials” from moving upwards.

• 

  thesacredpath · Member · Jan 20, 2009 at 6:22 am

  • Copy link

  Yep, he is a CSS guru.

• 

  devblog · Member · Jan 20, 2009 at 7:23 pm

  • Copy link

  A few suggestions:

  Keep your selectors organized by “type”. Element selectors (body, h1, etc.) first; ID selectors (#nav, #pic, etc.) second; class selectors (.page_meta, .post, etc) third.

  The following code has them organized, I’ve included the code to move the navigation bar below the header:

  h2 {
  font-weight:normal;
  font-size:1em;
  text-transform:uppercase;
  }
  
  h2.archive_head {
  font-size:1em;
  text-transform:uppercase;
  }
  
  h3 {
  font-size:1em;
  text-transform:uppercase;
  }
  
  h4 {
  font-size:.8em;
  text-transform:uppercase;
  }
  
  a {
  color:orange;
  text-decoration:underline;
  }
  
  a:visited {
  color:orange;
  text-decoration:underline;
  }
  
  a:hover {
  color:grey;
  text-decoration:underline;
  }
  
  #header{position: relative;}
  
  #nav {
  width:100%;
  border-top:0 solid #222;
  border-bottom:0 solid #222;
  
  float: none;
  overflow: hidden;
  clear: both;
  position: absolute;
  top: 200px;
  left: 0;
  }
  
  #nav ul {
  list-style:none;
  }
  
  #nav li {
  float:left;
  }
  
  #nav li a,#nav li a:visited {
  display:block;
  height:3em;
  line-height:3em;
  color:saddebrown;
  text-decoration:none;
  font-size:1em;
  text-transform:capitaize;
  letter-spacing:.3em;
  float:left;
  cursor:pointer;
  padding:0 1.2em;
  }
  
  #nav li a:hover {
  color:grey;
  background:white;
  text-decoration:none;
  }
  
  #nav li.current_page_item a:link,#nav li.current_page_item a:visited {
  background:white;
  color:orange;
  cursor:default;
  }
  
  #pic {
  border-bottom:2px solid white;
  
  overflow: hidden;
  float: none;
  clear: both;
  }
  
  #content h4 {
  display:none;
  }
  
  #footer {
  width:770px;
  padding-top:8px;
  border-top:none solid white;
  font-size:1em;
  text-transform:lowercase;
  letter-spacing:.3em;
  float:left;
  clear:both;
  }
  
  #sidebar ul li.widget ul {
  background:white;
  clear:both;
  padding:10px 0 7px 20px;
  }
  
  #sidebar ul li ul,#sidebar ul li ol {
  list-style:none;
  padding-left:20px;
  margin-bottom:12px;
  }
  
  .post_meta {
  display:none;
  }
  
  .page h2,.attachment h2 {
  font-size:0;
  }
  
  .post h2,.page h2,.attachment h2 {
  color:white;
  line-height:.5;
  padding-top:0;
  margin-bottom:10px;
  }

• 

  littleh · Member · Jan 20, 2009 at 7:48 pm

  • Copy link

  thanks a lot devblog!

  can anything be done with making the image from “welcome” and text from “testimonials” flush with the top of the sidebar word “storefront”? there’s some margin space but i am unable to identify the value that affects it…

• 

  devblog · Member · Jan 20, 2009 at 8:10 pm

  • Copy link

  I’m sorry but am not quite following what you ask… maybe because of the long weekend (and because I need more coffee).

• 

  vivianpaige · Member · Jan 20, 2009 at 9:31 pm

  • Copy link

  It looks like it is the sidebar list formatting (but then what do I know)

• 

  vivianpaige · Member · Jan 20, 2009 at 9:32 pm

  • Copy link

  Sorry – that’s not it. I was looking at something else

• 

  littleh · Member · Jan 20, 2009 at 10:21 pm

  • Copy link

  hey devblog, more coffee always helps, i’ve had some too so let’s see if i can explain myself better…

  i put in a red background to illustrate how the top of the photo image is flush with the bottom of the “storefront” lettering, while the top of the red background overshoots it a bit.

  how do i move the image as well as the text in “testimonials” to be even with the top of the “storefront” lettering?

• 

  devblog · Member · Jan 20, 2009 at 11:44 pm

  • Copy link

  Thank you! now I get it. When I get home, I’ll see what I can do to fix that.

• 

  devblog · Member · Jan 20, 2009 at 11:47 pm

  • Copy link

  BTW, I call it “alignment” (is not aligned with…, etc.); flushing to me means something else(it means “forcing” to clear up something from memory). :)

• 

  littleh · Member · Jan 21, 2009 at 12:15 am

  • Copy link

  got it! alignment.

  so i used your code and notice that i would like to align the left margin of the photo with the “Home” in the navigation bar and…

  would like to align “Storefront” with the top of the photo margin.

  any way to get rid of the word “home” in the navigation bar?

  that would all make my world a perfect place, thanks!

• 

  devblog · Member · Jan 21, 2009 at 2:04 am

  • Copy link

  Let me see what I can do.

  If it take awhile for me to post, just be patient. I’ll post something as soon as I can.

• 

  littleh · Member · Jan 21, 2009 at 7:40 pm

  • Copy link

  thanks devblog

• 

  devblog · Member · Jan 22, 2009 at 7:54 pm

  • Copy link

  I haven’t forgotten about you. I’ve been working on a big project at work that when I get home I just don’t want to see more code. I’ll take a look at it this weekend.

• 

  littleh · Member · Jan 22, 2009 at 11:19 pm

  • Copy link

  i understand and appreciate the help.

• 

  devblog · Member · Jan 25, 2009 at 7:57 pm

  • Copy link

  Sorry for the delay. Add the following code:

  below the #pic definition

  #content {
  padding: 0;
  margin: 0;
  width: 520px;
  }

  below teh #footer definition

  #sidebar {
  width: 200px;
  margin: 10px 0 0;
  }

  above the .post_meta definition

  .post {
  width: 520px;
  }

  modify these selectors definition with this code:

  .page h2,.attachment h2 {
  display: none;
  }

  That should aligned the picture with the title of your sidebar.

  HTH

• 

  littleh · Member · Jan 25, 2009 at 8:37 pm

  • Copy link

  tried these out but it brought back the original formatting. not pretty! i’ll play around with these above code. thanks for your help, hope you enjoy your weekend!