replacing the nav menu text links with clickable images

  • Resolved victorm97

    (@victorm97)


    8 years, 3 months ago

    i am currently working on a multi-language site on evolve theme and i am trying to integrate the language switcher in the menu with flag images. I used a custom plugin to add the code i found on this article but the flag image is being displayed in the upper part of the menu as you can see here.
    The code i used looks like this : `#menu-item-531 a {
    display:block; height:24px; width:24px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
    background-image:url(‘http://translation-professionals.ro/wp-content/uploads/2016/01/menu-de.png’); background-position:0 0;
    background-repeat: no-repeat;
    }
    #menu-item-531 a:hover { background-position:0 -24px; }`

    and a screenshot of how it’s being displayed: http://imgur.com/jV4Y3kH

Viewing 7 replies - 1 through 7 (of 7 total)
  • Sanjog

    (@sanjog)

    8 years, 3 months ago

    Hi @victorm97

    As far as i have researched the site is not taking your CSS. Try using it in customize.
    Go to Admin Section -> Appearance -> Customize ->Custom CSS
    And then copy your CSS it might work
    If still problem you can report.

    Thank You!!

    Thread Starter victorm97

    (@victorm97)

    8 years, 3 months ago

    That didn’t work either. When i load the css the text is being replaced with the image but it looks like it has a bottom margin that pushes it up like that, same problem as when i tried uploading it in the themes custom css field.

    Thank you for replying! I really apreciate it

    Sanjog

    (@sanjog)

    8 years, 3 months ago

    Hi @victorm97

    I think this is CSS problem if Custom CSS is working fine then try to change padding attribue.Please check this link for padding

    Thank You!

    Thread Starter victorm97

    (@victorm97)

    8 years, 3 months ago

    i don’t know, the padding is set to 0px. i tried adjunsting the height and width but that didn’t fix it. maybe there’s an error somwhere else because the css above worked good for others. any other suggestions ?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 3 months ago

    What’s the issue, that it’s not centred? You can centre a background image by using background position:

    background-position: center;
    Sanjog

    (@sanjog)

    8 years, 3 months ago

    Hi @victorm97

    You can try:
    background-position: 0px 20px;

    Thank You!!!

    Thread Starter victorm97

    (@victorm97)

    8 years, 3 months ago

    That worked!! Thanks a lot

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘replacing the nav menu text links with clickable images’ is closed to new replies.