WordPress.com

1. sporadicallysandra
   Member
   Jun 12, 2012, 2:00 AM

   Hi,
   I've been trying to figure out how to edit the horizontal navigation menu above my header. I'm using the pilcrow theme. Ideally I'd like to be able to have images as buttons for my about me, contact me, etc. Is that possible? Right now though I"m just trying to change the font and background to try and get it to not look so blocky.

   Thanks.

   The blog I need help with is ablogtobraggabout.com.

2. jarretcade
   Member
   Jun 12, 2012, 2:40 AM

   In your custom CSS you can add

   #nav ul li {
       font-family: Tahoma;
   }

   to change the font family for the links. Tahoma can be changed to a different font for the desired effect. As an FYI, all computers may not have access to the same fonts that you do so if you apply a font on your computer that somebody else does not have installed only you will see it.

   You can make changes to the background by doing something like

   #nav {
       background: red;
   }

   to make the background red.

   #nav {
       border-top: double 3px red;
   }

   would change the top border. Lots of options to change the look.

   In regards to replacing links with images, it is possible though requires some work on your part.

   You would have to find the dimension of the link that you want to create an image for. Then create the custom image for that link. Upload the image to your site and then in your CSS you would do something like

   #nav ul li.menu-item-390 {
       background: url('http://0.gravatar.com/avatar/e00501bf782b42d5db19ff75fca14f6a?s=128&d=mm&r=G') no-repeat top center;
   }

   to replace the Contact Me link with an image background. Note that for each link the above 390 would change depending upon the class of that link.

   Contact Me = 390
   About = 389
   Home = 388

3. sporadicallysandra
   Member
   Jun 13, 2012, 12:18 AM

   This has been a lot of help.. just a few more questions on this:

   How can I remove the black bar on the top and bottom of the navigation menu.
   Is it possible to add small pictures between the Home, Contact, About, sort of like bullets but also have one at the end for uniformity.
   How can I center the links in the menu bar instead of have them on the left?

   Thanks!!

4. jarretcade
   Member
   Jun 13, 2012, 1:15 AM

   Ok so the pictures thing took awhile to figure out, especially getting the alignment working correctly.

   In your current CSS code, the last item you have is

   #nav ul {
   	list-style-image:url('bullet link');
   }

   Replace that with the following block of code

   #nav ul li {
       list-style: url('http://0.gravatar.com/avatar/e00501bf782b42d5db19ff75fca14f6a?s=32&d=mm&r=G') inside;
       margin: 10px 0px 0px 0px;
       padding: 0px;
   }
   
   #nav ul li:last-child:after {
       content: url("http://0.gravatar.com/avatar/e00501bf782b42d5db19ff75fca14f6a?s=32&d=mm&r=G");
   }
   
   #nav ul li a {
       vertical-align: top;
       display: inline-block;
       margin-top: -3px;
   }
   
   #header {
       text-align: center;
   }
   
   #nav {
       border-top: none;
       border-bottom: none;
       width: auto;
       margin: auto;
       display: inline-block;
       float: none;
   }

   The 2 URLs listed in my code: http://0.gravatar.com/avatar/e00501bf782b42d5db19ff75fca14f6a?s=32&d=mm&r=G will have to be changed to an image that you want to show. Find the URL to the image, preferably one you upload somewhere and then replace the URL with the URL to the image. Make sure to leave the URL inside of the apostrophe characters.

   Once you have that done, your new images should load in place of my avatar images. You might have to mess around with some margin and padding values to get alignments working unless you can find an image that has the design in the center of the image and is 32x32.

   Confusing? Thats ok, if you need more help just reply and I'll try to answer!

   BTW I've only tested this in Chrome 19 on Windows 7. I have not tried it in other configurations so I can't provide any guarantee that it'll work on something different.

Topic Closed

This topic has been closed to new replies.