Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #16219

    hello

    i have my test site here:

    http://edgemontseniorliving.com/

    currently password protected, so access is:

    esl1234

    you will see that i have placed some dummy icons above each menu title, but this is a bit of a hack because it’s a header background image

    it works ok but if i look in different browsers it’s no longer centered above each title, so what would be ideal is to have each title have it’s own unique icon centered above, if possible?

    for my hack, i added this to custom.css

    /* background image icons in header */

    #header .container {

    background: url(‘../images/icons/icon-header.png’) !important;

    }

    this member seems to have done something close to what i want, but i want each icon to be unique

    http://cloud9spa.com/newsite/

    not sure how this would work; please advise

    thank you :) jodi

    #90632

    Hi Jodi,

    This is a bit of a hack and you will definitely need to massage the values a bit but this will get you what you are looking for on a basic level. You’ll need to use the model for the first menu item to finish up the rest. You can inspect each menu item to get its ID and use that ID to target it specifically with css.

    Note, I’ve used background-position and the original image to find the specific icon and display it, so you can just change the x coordinates and that will give you each icon without having to use multiple images.

    .main_menu {
    top: 58%;
    line-height: 85px;
    }
    #menu-item-537 {
    background: url('http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/icon-header.png');
    background-position-x: -299px;
    background-position-y: -29px;
    height: 63px;
    display: block;
    }

    Regards,

    Devin

    #90633

    thanks so much, devin – as you say, a bit of a hack but if can get them aligned nicely it will be worth the time! i’ll let you know if i have any other questions after i try my hand at a couple

    thanks, jodi

    #90634

    Hi,

    I’m confident Devin’s code will work. :)

    Regards,

    Ismael

    #90635

    hi you 2

    so i finally got back to working on this site and have tried to use the code you gave me to get it right but something is not quite there yet, sorry

    i am trying to center a single icon over each nav element because it looked fine in (on my mac) chrome, but not in firefox or safari, so there needs to be 6 unique icons over the 6 nav elements

    i have modified custom.css as follows:

    /* home */

    #menu-item-774 {

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

    background-position-x: -300px;

    background-position-y: -40px;

    background-position:center;

    background-repeat:no-repeat;

    height: 40px;

    display: block;

    }

    /* about */

    #menu-item-775 {

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

    background-position-x: -700px;

    background-position-y: -40px;

    background-position:center;

    background-repeat:no-repeat;

    height: 40px;

    display: block; }

    what is happening, though, is even if i change my x value for item 774 it doesn’t seem to move – once i can get that to work it seems like the next one will align properly

    sorry to be a pest, but please help :) thanks again, jodi

    #90636

    me again

    i added in all of the icons and it seems that they seem to space out accordingly, with the exception of the first one, which does not seem to move on the x axis if i change it

    thanks so much!

    #90637

    Hi,

    It is because of this code background-position: center;. Try to remove that and edit the background position x and y axis.

    Regards,

    Ismael

    #90638

    ok, so i think i have it! it still wasn’t quite working so i added in some !important to force it

    here is my code from custom.css, in case someone else wants to do this; thanks so much, ismael & devin :)

    /* home */

    #menu-item-774 {

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

    background-position-x: 32px !important;

    background-position-y: -40px;

    background-repeat:no-repeat !important;

    height: 40px;

    display: block;

    }

    /* about */

    #menu-item-775 {

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

    background-position-x: 35px !important;

    background-repeat:no-repeat;

    height: 40px;

    display: block; }

    /* application */

    #menu-item-800 {

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

    background-repeat:no-repeat;

    background-position-x: 51px !important;

    height: 40px;

    display: block; }

    /* community */

    #menu-item-799 {

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

    background-repeat:no-repeat;

    background-position-x: 101px !important;

    height: 40px;

    display: block; }

    /* news */

    #menu-item-323 {

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

    background-repeat:no-repeat;

    background-position-x: 32px !important;

    height: 40px;

    display: block; }

    /* contact */

    #menu-item-346 {

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

    background-repeat:no-repeat;

    background-position-x: 42px !important;

    height: 40px;

    display: block; } */

    #90639

    If you need further assistance let us know.

    Closing post.

    Regards,

    Mya

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

The topic ‘add different icons above main menu titles in header’ is closed to new replies.