WordPress.org

Forums

Menu Image
[resolved] Title under icon image (17 posts)

  1. jarrii
    Member
    Posted 1 year ago #

    Hi, can you help me with changing position of title? In yoor plugin is align of title after, before or hide. I need title under the icon. THX.
    Jaroslav

    https://wordpress.org/plugins/menu-image/

  2. zviryatko
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. jarrii
    Member
    Posted 1 year ago #

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

  4. Pablo Molina
    Member
    Posted 1 year ago #

    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.

  5. zviryatko
    Member
    Plugin Author

    Posted 1 year ago #

    I think it can help:

    #your-menu-id li a {
        display: block;
        text-align: center;
    }
  6. Pablo Molina
    Member
    Posted 1 year ago #

    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?

  7. zviryatko
    Member
    Plugin Author

    Posted 1 year ago #

    #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.

  8. Pablo Molina
    Member
    Posted 1 year ago #

    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

  9. zviryatko
    Member
    Plugin Author

    Posted 1 year ago #

    #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 =)

  10. Pablo Molina
    Member
    Posted 1 year ago #

    Perfect; you are the men!

    Many thanks again!

  11. Pablo Molina
    Member
    Posted 11 months ago #

    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

  12. zviryatko
    Member
    Plugin Author

    Posted 11 months ago #

    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.

  13. Pablo Molina
    Member
    Posted 11 months ago #

    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.

  14. Pablo Molina
    Member
    Posted 11 months ago #

    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

  15. zviryatko
    Member
    Plugin Author

    Posted 11 months ago #

    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

  16. Pablo Molina
    Member
    Posted 11 months ago #

    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

  17. Pablo Molina
    Member
    Posted 11 months ago #

    Hello zviryatko, I restored a Website full backup and had it back.

    Thanks for your time

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Menu Image
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.