WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. jarrii
    Member
    Posted 6 months 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 6 months 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 6 months 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 5 months 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 5 months ago #

    I think it can help:

    #your-menu-id li a {
        display: block;
        text-align: center;
    }
  6. Pablo Molina
    Member
    Posted 5 months 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 5 months 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 5 months 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 5 months 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 5 months ago #

    Perfect; you are the men!

    Many thanks again!

  11. Pablo Molina
    Member
    Posted 2 weeks 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 1 week 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 1 week 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 1 week 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 1 week 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 1 week 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 1 week ago #

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

    Thanks for your time

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.