Nsp module in menus

Hi all Gavick users!
I have the following problem:
I want my menu to look like the menu on the www.theverge.com (when i'm hovering over the menu the last 4-5 news to appear with a dropdown effect)
Please help me to achieve that. Thanks!
my site sc2.osica.ro

Hi

In menu manager please edit a subelement of the option You want this look to appear. Than go to Advanced options > Menu params (GavickPro) and configure it the way as shown on screenshot. Than prepare a module so show in chosen position.

Hi!
I already tried that and it break the menu. It looks like that: www.sc2.osica.ro.

Hi

It;s broken because You have attached it to the parent menu item. Try create a subelement and add a module to it as group item type. Please remove group from parent element. Than it will work as expected. If You will have more problems to make that, just send me an access to joomla panel.

Hi ! i've send you a pm.
How to hide submenu name?
Can i apply a module style on the menu?

Hi

I can see this worked. Unfortunately You cannot use module suffixes because it's disabled in this place. Now You need to make some style changes. Please add this code to resize it, try first add a class in menu item settings:

Code: Select all

.NEW-CLASS-NAME .gkcol {
    width: 100%;
}

.NEW-CLASS-NAME .gkcol header {
    display:none;
}


Thank you for your help . Where should i put this code? in which ccs file i should create a new class?

Can anyone help me?
Thanks!

Please can you explain more in detail. please check www.sc2.osica.ro and hover over actualitate to see what i mean.

Hi

Please do not bump Your own thread. After each bump thread it being moved to the end of the line and You need to wait longer for me to answer.

All css modifications should be place in override.css, but remember to allow using override in template settings.

I see a class "stiri" in this menu. Please put it to the parent menu element not to the element You will have module in, becuase resizing this column will not be possible. When You move it the code should looks like:

Code: Select all

.stiri .gkcol {
    width: 100%;
}

.stiri .gkcol header {
    display:none;
}


Great work. Only one problem remains. The title text under the image is longer than the image.

Hi

A space in module is divided equally between artices and titles are using this space, so please try to resize the image than or add one more column.

Hi again!
I followed your tips and i bumped into a new problem. I modified all my menus but when you hover on them the subcontent drop down menu is shrinking. Please help me.
To understand better what i want to mean visit www.sc2.osica.ro

Hi !
I think the best solution is to display to entire width of the menu . See the picture below

menu.jpg

Hi

This code should help for that:

Code: Select all

.gkMenu > ul > li:hover > .childcontent,
.gkMenu > ul > li:hover > .childcontent li:hover > .childcontent {
    left: 0;
}


Thnk you a lot! This is looking very nice now.

Hi

No problem. Glad I could help.

Hi and many thanks for your support.

Please look again on the menu i don't know what happened something is not right.

www.sc2.osica.ro

Hi

I think You have forget to put the "stiri" class suffix to the menu item

Please look again. Indeed i forgot to put the class sufix on one menu but it still doesnt look goog.
Thanks!

Hi

Please try add this class to css:

Code: Select all

.gkMenu > ul > li:hover > .childcontent, .gkMenu > ul > li:hover > .childcontent li:hover > .childcontent {
    left: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
}


Thanks for your great support.
I think this menu it would be a great idea for some future template.
Topic soved

Hi

Great. Glad I coud help