Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2146

    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

    #36845

    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?

    #36846

    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/

    #36847

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

    #36848

    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!

    #36849

    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

    #36850

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

    #36851

    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!

    #36852

    Really cool design :D

    #36853

    thanks dude! you guys make an awesome product!

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Main Nav Icon’ is closed to new replies.