Image Position and title-layout with menu-image plugin

If I understand right, you want ability to place picture after the title?

Yesterday I’ve done ability to place image after title, but I’ve leave it in the trunk, today or tomorrow I’ll make some small changes and upload the new version.
If you need changes as soon as possible, you can get code from trunk.

Hi there!
Thank you for your efforts!

Here i linked a sample what i ment concernig the placement of the images:

https://www.lost-architekten.ch/constructions

It is more the idea that you can define the position of the shown images when you have a menu list. And that this position is the same for several Images of different menu-points.

Thank you very much for your support – i really appreciat your effort!

This is a special case and need not so often.
You can solve this by using only css, or using css and javascript.

Okey. But how do this works? I am totally new at wordpress and do not know how to do it.

is there a way that i could copy the css code from that page and paste it into a php file of mine?

or is it possible that you can give me just such a code as a extension for your plugin?

It is just that additional thing which would make your plugin exactly working the way i need ??

Hm… The best way you should read the basics css, it will be enough to solve your problem.
It will not take much time.
Start here – https://www.w3schools.com/css/
In your case, it is enough:

• https://www.w3schools.com/css/css_positioning.asp
• https://www.w3schools.com/cssref/sel_hover.asp

And of course you can look at the code your example with the developers tools like a firebug in firefox or webkit inspector in chrome.

So, i tried, but whitout any success!

But is it possible to modify the php or css-file to

– reduce the distances between the menu-lines?
– give possibility to define the position of the images?

is it possible that you can tell me where in the could i could change what for achieving? Thanks ??

First, remember, PHP – it’s backend, he generates HTML code for frontend, and CSS can help you to style everything in frontend.
In case with my module, each link contain text and image, with css position:absolute you can move your image anywhere you need.
Also you can learn and do task self, or hire someone on sites like odesk.com or free-lance.com.

This is a great and simple plugin, but i have one question. I would want the pictures to be on top of the text ( like here https://themes.trendywebstar.com/SquarePixels/ ). I would edit the code my self, but I just haven’t found the right spot and code :/

Maybe yoo could add this option.

Also is it possible that when clicked on the menu tab is active the image would hold its hover color?

You can do it very easy with CSS code, as example (add this code to your style.css file):

ul#your-menu-html-id li a img,
ul#your-menu-html-id li a .menu-image-hover-wrapper
{
    display: block;
    float: none;
    margin: 0 auto;
}

To see your-menu-html-id you can use Inspect element feature of your browser.

Also is it possible that when clicked on the menu tab is active the image would hold its hover color?

As for this feature I think I do it in the next version, but now you always can do it with CSS rule… All active link elements in menu has class .current-menu-item, so you can add to style.css something like this:

ul#your-menu-html-id li.current-menu-item a.menu-image-hovered .menu-image-hover-wrapper img {
    opacity: 0;
}
ul#your-menu-html-id li.current-menu-item a.menu-image-hovered .menu-image-hover-wrapper img.hovered-image {
    opacity: 1;
}

I hope it can help you!

With some minor adjustments the first code worked perfectly. The second one was a simple copy-paste job. Thanks alot, make sure you insert these options into the new version.

One more question, how could i prohibit these changes to be only in the mainmenu as I want the submenu images to be on the left side of the text.

Thanks again!

One more question, how could i prohibit these changes to be only in the mainmenu as I want the submenu images to be on the left side of the text.

Again, you can use magic of CSS ??
something like this:

ul#your-menu-html-id li ul li a .menu-image-hover-wrapper
{
    float: left;
}
ul#your-menu-html-id li ul li .hovered-image {
    opacity: 0;
}
ul#your-menu-html-id li ul li a:hover .hovered-image {
    opacity: 1;
}

it might work… but I’m not sure.
very difficult to make a single decision for all cases (

Hello,

Please help. I’d like the menu images to be placed next to each other. Here is the site where you can see images under each other. https://test11.andras-kovacs.com/ 6 pages/images should be placed in two lines(2×3). Is it possible?

Thank you