Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #16682

    hello, all

    my older post about this topic (http://www.kriesi.at/support/topic/add-different-icons-above-main-menu-titles-in-header) worked well on safari and chrome, but i discovered that it did not work on ie or firefox, so i had to rethink and come up with another option

    this is my code, below (added to custom.css); a bit of a hack but it works on all browsers; for some reason it needed !important to work

    i wanted to share in case someone else wants to do the same; enjoy :)

    my site:

    http://edgemontseniorliving.com/

    pwd (until live):

    esl1234

    **********************************

    /* removed the 30px margin from layout.css */

    .main_menu ul:first-child > li > a{

    text-align: center;

    margin-left:0px;}

    /* adjusts the up arrow on the pulldown nav */

    .main_menu .menu ul {

    margin-left:-95px;

    }

    /* home */

    #menu-item-774 {

    background: url(‘http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconHome.png’) !important;

    width: 80px;

    background-position: center top !important;

    background-repeat:no-repeat !important;

    display: block;}

    /* about */

    #menu-item-775 {

    background: url(‘http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconAbout.png’);

    width: 100px;

    background-position: center top !important;

    background-repeat:no-repeat !important;

    display: block;}

    /* application */

    #menu-item-800 {

    background: url(‘http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconApplication.png’);

    width: 120px;

    background-position: center top !important;

    background-repeat:no-repeat !important;

    display: block;}

    /* community */

    #menu-item-799 {

    background: url(‘http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconCommunity.png’);

    width: 200px;

    background-position: center top !important;

    background-repeat:no-repeat !important;

    display: block;}

    /* news */

    #menu-item-323 {

    background: url(‘http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconNews.png’);

    width: 70px;

    background-position: center top !important;

    background-repeat:no-repeat !important;

    display: block;}

    /* contact */

    #menu-item-346 {

    background: url(‘http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconContact.png’);

    width: 90px;

    background-position: center top !important;

    background-repeat:no-repeat !important;

    display: block;}

    #92460

    Hi!

    Thanks for sharing your solution :)

    Regards,

    Peter

    #92461

    my pleasure, peter! you all do such a good job with support, and i think that it’s important to share and help others, too :)

    #92462

    Hi webWahine,

    Thanks for sharing, I’m sure many people would find this thread helpful. :)

    Regards,

    Ismael

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

The topic ‘icons above menu – revised’ is closed to new replies.