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.
Thread Starter
jarrii
(@jarrii)
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.
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?
#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
#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!
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
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.
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.
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
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
