Support » Plugin: Menu Image » Title under icon image

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author zviryatko

    (@zviryatko)

    Hi, Jaroslav.

    You can set position to “after” and add CSS rule

    #your-menu-id img {
      display: block;
    }

    but it can break hover effect if you use it.

    Hi, thx for help. Sometimes I feel like looser. I copied your css code with #your-menu-id and see no effect 😀 I changed it and it works fine. I have to learn more CSS, because I missed DISPLAY 🙁

    Hello:

    CSS code above worked great; but, can´t center the text title.

    Used “display:block, margin: o auto” to center image; centered fine;But the text title, impossible: http://paulabarragan.com/mobile/

    Please advice.

    Thanks.

    Plugin Author zviryatko

    (@zviryatko)

    I think it can help:

    #your-menu-id li a {
        display: block;
        text-align: center;
    }

    Worked great! zviryatko, thanks.

    One last thing; on hover, the title goes to the right (image-title-after). Image here: http://paulabarragan.com/mobile/hover.png

    Any way to keep the title at the bottom, also on hover?

    Plugin Author zviryatko

    (@zviryatko)

    #your-menu-id li a span.menu-image-hover-wrapper {
        display: block;
        float: none;
    }

    and for each media query you need to add height property:

    @media (min-width: 680px) {
      .menu-image-hover-wrapper  {
        height: 49px !important;
      }
    }
    @media (min-width: 480px) and (max-width: 680px) {
      .menu-image-hover-wrapper  {
        height: 39px !important;
      }
    }
    @media (min-width: 380px) and (max-width: 479px)  {
      .menu-image-hover-wrapper  {
        height: 34px !important;
      }
    }
    @media (max-width: 379px) {
      .menu-image-hover-wrapper  {
        height: 25px !important;
      }
    }
    @media (max-width: 280px) {
      .menu-image-hover-wrapper  {
        height: 20px !important;
      }
    }

    I wrote this code based on your css.

    Worked fine; you are the men!

    But the image loosed the center as you can see in http://paulabarragan.com/mobile/small.png

    Thanks for all your help

    Plugin Author zviryatko

    (@zviryatko)

    #your-menu-id li a.menu-image-hovered {
        line-height: inherit !important;
    }
    #your-menu-id li a span.menu-image-hover-wrapper {
        display: block;
        float: none;
        margin: 0 auto;
    }
    @media (min-width: 680px) {
      .menu-image-hover-wrapper  {
        width: 49px !important;
        height: 49px !important;
      }
    }
    @media (min-width: 480px) and (max-width: 680px) {
      .menu-image-hover-wrapper  {
        width: 39px !important;
        height: 39px !important;
      }
    }
    @media (min-width: 380px) and (max-width: 479px)  {
      .menu-image-hover-wrapper  {
        width: 34px !important;
        height: 34px !important;
      }
    }
    @media (max-width: 379px) {
      .menu-image-hover-wrapper  {
        width: 25px !important;
        height: 25px !important;
      }
    }
    @media (max-width: 280px) {
      .menu-image-hover-wrapper  {
        width: 20px !important;
        height: 20px !important;
      }
    }

    I hope it will not cause more problems =)

    Perfect; you are the men!

    Many thanks again!

    Dinamicore

    (@dinamicore)

    Hello support:

    I updated the menu today, and lost the customization given in this support thread.

    Any way to recover the customization, even if it means going back to the prior menu version?

    Thanks

    Plugin Author zviryatko

    (@zviryatko)

    did you added css in menu-image.css? or in theme style.css? If first, don’t do that anymore! Add css rules only in theme style files, and if you use any “updatable” theme than create child theme and customize it.

    Dinamicore

    (@dinamicore)

    Hello zviryatko,

    All the customization was done in style.css in child theme.

    But, something happened.

    Please provide the previous version of your menu.

    Thanks.

    Dinamicore

    (@dinamicore)

    UPDATE:

    I found the previous version of the menu.

    Partially restored prior display of navigation menu.

    But, 2 issues:

    1. Text not centered
    2. Title in CONTACT menu item top right, is still to the left

    Please advice; customization is in http://paulabarragan.com/mobile/wp-content/themes/Less/style.css starting on line 817 /* start menu code */ end line 878

    Thanks

    Plugin Author zviryatko

    (@zviryatko)

    All versions you can find on “developers” tab http://wordpress.org/plugins/menu-image/developers/ or on github https://github.com/zviryatko/menu-image
    see style.css revisions https://github.com/zviryatko/menu-image/commits/master/menu-image.css and find needed update

    Dinamicore

    (@dinamicore)

    Hello zviryatko,

    I installed the previous version of the menu.

    Partially restored prior display of navigation menu. You can see in http://paulabarragan.com/mobile/

    But, 2 issues:

    1. Text not centered
    2. Title in CONTACT menu item top right, is still to the left

    Please advice; customization is in http://paulabarragan.com/mobile/wp-content/themes/Less/style.css starting on line 817 /* start menu code */ end line 878

    Thanks

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Title under icon image’ is closed to new replies.