Main Nav Icon

10 posts from 4 voices

• Started 2 years ago by thenameisfernando
• Latest reply from thenameisfernando
• This topic is not a support question

Tags:

No tags yet.

1. 

   thenameisfernando
   Member

   Hey,
   I know this is a question I shouldn't be posting here but I thought I would give it a shot, I noticed some people for other Kriesi theme had asked similar questions but not exactly what I'm going to ask, you guys are awesome on this support forum..

   Well, I was wondering if it would be possible to place a small different image icon next to the links in the main navigation? If not, no worries, I appreciate all your help you guys have given here! Thank you! :) Oh and there's a link to an example of what I mean:

   http://img180.imageshack.us/img180/3701/siteexample.jpg

   Posted 2 years ago #
2. 

   Noah Hendrix
   Support Team

   I would say the best way to do this is apply a background-image in CSS on the id of the anchor tags.

   For instance the first link you have uses this id:

   #menu-item-441 { background-image:url(PATH/TO/IMAGE); }

   Does that help? It'll require additional CSS properties to get the positioning correct, but maybe that'll give you a jump start?

   Posted 2 years ago #
3. 

   thenameisfernando
   Member

   thank you so much, that was an awesome jump start! :) i've been messing around with it for the last hour and this is what i got so far, i added what you told me under my style2 css since its the style im using, the only problem is it repeats itself and isn't to the left of the link, i guess i just have to keep messing around with it, i wish i knew CSS haha i tried adding 'no-repeat' at the end of it but it didn't work

   /************************************************************************
   NAV
   *************************************************************************/
   
   .nav li a {
   border-left:1px dotted #ccc;
   
   }
   
   #menu-item-441 { background-image: url(http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png); }
   #menu-item-442 { background-image: url(http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png); }
   #menu-item-328 { background-image: url(http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png); }
   #menu-item-308 { background-image: url(http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png); }

   thanks again for everything!!

   http://www.thenameisfernando.com/

   Posted 2 years ago #
4. 

   Dude
   Dude

   no-repeat code would look like:

   /************************************************************************
   NAV
   *************************************************************************/
   
   .nav li a {
   border-left:1px dotted #ccc;
   
   }
   
   #menu-item-441 { background-image: url(http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png) no-repeat; }
   #menu-item-442 { background-image: url(http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png) no-repeat; }
   #menu-item-328 { background-image: url(http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png) no-repeat; }
   #menu-item-308 { background-image: url(http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png) no-repeat; }

   Posted 2 years ago #
5. 

   t4group
   Member

   I would love to know how to do this too. If you figure it out can you please post the code up here? That would great!!

   Cheers!

   Posted 2 years ago #
6. 

   thenameisfernando
   Member

   Hey Dude! Yeah, I tried that last night too, all that did was make the icon disappear completely. Thank you though! :) You guys are awesome!

   t4group: Once I can figure it out, I'll be more than happy to post the code up, unfortunately I stink at CSS so it might be some time LOL

   Fernando

   Posted 2 years ago #
7. 

   thenameisfernando
   Member

   ok good news! i'm making some progress! this time i stopped the repeating and aligned it left, now i just need to figure out how to align it more to the left so that its not under the navigation title, this is what i did so far:

   /************************************************************************
   NAV
   *************************************************************************/
   
   .nav li a {
   border-left:1px dotted #ccc;
   
   }
   
   #menu-item-441 {
   background-image: url('http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png');
   background-repeat:no-repeat;
   background-position:left top;
   }
   
   #menu-item-442 {
   background-image: url('http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png');
   background-repeat:no-repeat;
   background-position:left top;
   }
   
   #menu-item-328 {
   background-image: url(http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png);
   background-repeat:no-repeat;
   background-position:left top;
   }
   
   #menu-item-308 {
   background-image: url(http://www.thenameisfernando.com/wp-content/uploads/2010/11/iconbrush.png);
   background-repeat:no-repeat;
   background-position:left top;
   }

   Posted 2 years ago #
8. 

   thenameisfernando
   Member

   even better news! haha i went into my style css and looked for nav code that would change the padding in the main nav, when i found it, i messed around with different sizes until i got the correct positioning for whatever icon i'm using:

   #top .nav a{
   display:block;
   float:left;
   line-height:18px;
   outline:medium none;
   padding:4px 44px;
   text-decoration:none;
   width:55px;
   min-height: 35px;
   }

   check out my site and let me know how it looks http://www.thenameisfernando.com

   and hopefully i did everything the right way lol thanks again guys!

   Posted 2 years ago #
9. 

   Dude
   Dude

   Really cool design :D

   Posted 2 years ago #
10. 

    thenameisfernando
    Member

    thanks dude! you guys make an awesome product!

    Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.