WordPress.org

1. rodent16
   Member
   Posted 2 years ago #

   Hi,

   I have been struggling with customizing the navigation bar on my blog: http://www.djripe.com/blog/

   Ultimately, I want to have it looking like this:
   http://djripe.com/blog/wp-content/uploads/2010/01/Screen-shot-2010-01-23-at-9.28.32-PM.png

   That navigation bar is from http://www.djatrak.com

   The code for my navmenu is as follows:

   #navmenu ul {margin: 0; padding: 40px;
   	list-style-type: none; list-style-image: none; }
   #navmenu li {display: inline; padding: 15px 45px 15px 45px}
   #navmenu a {text-decoration:none; color: ; }
   #navmenu a:hover {color: red; }

   Any Help Would Be Much Appriciated!

   Thank You In Advance,

   Robert

2. rodent16
   Member
   Posted 2 years ago #

   The address for my blog is http://www.djripe.com/blog/

   I want the navigation bar to look like this: http://djripe.com/blog/wp-content/uploads/2010/01/Screen-shot-2010-01-23-at-9.28.32-PM.png

   The screenshot is of http://www.djatrak.com

   Thanks

3. transformer617
   Member
   Posted 2 years ago #

   Hi there rodent,
   This might help get you on the right tract. I haven't styled the active and current states for the menu, but so far it should look pretty close to what you're looking for:

   The HTML:
   

   <div id="navmenu">
   <ul>
   <li><a href="">blog</a></li>
   <li><a href="">about</a></li>
   <li><a href="">upcoming</a></li>
   <li><a href="">downloads</a></li>
   <li><a href="">contact</a></li>
   </ul>
   </div>

   The CSS:
   

   #navmenu ul {
   	margin: 0;
   	list-style-type: none;
   	list-style-image: none;
   	background: #01000a;
   	float: left;
   }
   #navmenu li {
   	display: inline;
   	font-size: 1.5em;
   }
   #navmenu a {
   	text-decoration:none;
   	padding: 15px 45px 15px 45px;
   	float: left;
   	color:#a19060;
   }
   #navmenu a:hover {
   	color: red;
   }

   HTH,
   Bill

4. transformer617
   Member
   Posted 2 years ago #

   PS to my post: A-Trak uses a background image positioned right for his vertical spacer and then gives a special style to the last link to eliminate it.
   --b

5. rodent16
   Member
   Posted 2 years ago #

   Thanks for your help,

   I tried to make the above changes, however the bar ended up on the top of the screen!

   I am fairly new to CSS so I could just be my fault.

   About, your last post. What does this mean? How would I do the same?

   Thanks,

   Rob

6. rodent16
   Member
   Posted 2 years ago #

   Also, on A-Trak's site the Navigation bar is not in any border.

   In addition, the top of the page closes off!

   How could I do these things?

   I really appreciate it,

   Robert

7. Galaxy_High
   Member
   Posted 2 years ago #

   If you're using WordPress style the class page_item and current_page_item.

   /*Work around for IE*/
   #navigation ul li{
   width: 120px;
   float: left;}
   
   #navigation ul li a:hover{
   display: block;
   color: #000;
   background-color: #fff;}
   
   .page_item a:link, .page_item a:visited, .page_item a:hover, .page_item a:active{
   display: block;
   width: 120px;
   float: left;
   color: #fff;
   background-color: #000;}
   
   .current_page_item a:link, .current_page_item a:visited, .current_page_item a:hover , .current_page_item a:active {
   display: block;
   color: #000;
   background-color: #fff;}

Topic Closed

This topic has been closed to new replies.