Welcome, Guest
Username: Password: Remember me
Use this Category for your support questions about Responsive Joomla Virtuemart Template - CoolMart (SKU# FLEX-00014)

TOPIC: Menu width depending on children cols number

Menu width depending on children cols number 9 years 11 months ago #9570

Hi,

I need to make a logic modification regarding the width of the children menu that is always 980px (template size). The thing is that when i have 6columns the menu is fine. But when i have only one column set, then it is really hard to navigate to navigate and surely it is not user friendly at all.

Is there a fix to adjust the width based on the columns set? I would like to center the drop down under the parent menu item, so even if i have only one column the user will find the options right under without this huge space.. Please see the images attached.

If you can't provide me a solution, please guide me to the location of the javascript files responsible for that so i can fight with it..

Thank you
Attachments:
The topic has been locked.

Menu width depending on children cols number 9 years 11 months ago #9581

Hi,

You actually point out a very good point. Honestly, i have never thought about it. It will destroy the User-experience if you leave everything with this state.

Resolving this through the JavaScript doesn't make any sense. But it can be taken care by CSS, and it is easier than you would think of.

A simple float:right; rule for the drop down box inner will take care it. But the problem is, that CSS rule should be applied only for the specific menu item (the last menu item in your case).

To apply the CSS rule only to specific drop down box, we should use the help of specific CLASS name for that element. Luckily, every parent menu item has a specific CLASS name (based on ItemID)
Look at the screenshot:

Attachment Pasted_Image_4_24_14__7_03_PM.png not found



By following this idea, we can easily define a CSS that will be effective only for the designated drop down element.

using
.item562 .dropdown .dropdown-bg.wrapper { float:right;}

is just one way of doing it. OR you can use text-align:right;, like this:
.item562 .dropdown .dropdown-bg.wrapper { text-align:right;}

OR put some padding space to left side, so the child menu items will stay right below the Parent menu item. Something like:
.item562 .dropdown .dropdown-bg.wrapper { padding-left:600px;}

There are some other CSS rules that will work as well. It is up to you to go with which ever sounds more suitable to you, or which ever you are familiar

(again, don't attempt to jump into JS files, it will mess up everything. CSS is always more efficient and easier way to handle those things.)

If you like CoolMart and satisfied with the support you have received, please "write a review" on:
www.flexiblewebdesign.com/Joomla-Virtuemart-Templates/CoolMart

Rate CoolMart and write a couple of sentences to share your experience with the support team.
It won't take more than 2 minutes from you but it is extremely important for us.

Thanks in advance!

Regards,
Support
Last Edit: 9 years 11 months ago by Support.
The topic has been locked.

Menu width depending on children cols number 9 years 11 months ago #9591

Thanks the suggestions. Of course i prefer fixing this via css instead of messing the javascript and this is what i will do! Thanks a lot.

I have already left a review for the product (the first from the 2 users), but i believe that indeed more users should and it's a good thing that you remind it
The topic has been locked.

Menu width depending on children cols number 9 years 11 months ago #9592

Hi,

Thanks anyway. If you have already written a review, just ignore ;)

Case solved. topic is closed.

Regards,
Support
The topic has been locked.
Time to create page: 0.078 seconds

MaterialMart

for Virtuemart 3

Google's Material Design has finally arrived to Virtuemart

Virtumart Template - MaterialMart Virtumart Template - CleanMart Virtumart Template - CleanMart Virtumart Template - CleanMart

Fully responsive!

Buy Now   |   Live Demo