replace or modify built-in template menu

How can i get the built-in template menu to function like:
http://modules.joomseller.com/joomla-modules/dropdown-mega-menu.html

If this can't happen, how can i place a module in place of the built-in template menu?

Hi

Actualy our template are using a scrip of this menu so it can be done exactly like it. Here You can find an documentation of it: https://www.gavick.com/documentation/jo ... work-menu/

This is good.
I don't want the menu to dropdown below the selected item.
How do i set the dropdown to be the full width of the menubar or entire template?

Hi

Actualy our template are using a scrip of this menu so it can be done exactly like it. Here You can find an documentation of it: https://www.gavick.com/documentation/jo ... work-menu/

Hi

Can You please show me a page You are working on. I need to see how You've made submenus to answer that.

I have not done this yet.
Examples of what i want can be found at these sites:
http://www.cbsnews.com/
http://www.nike.com/us/en_us/
Both of these sites have a dropdown menu that goes the full width of the template or webpage.
How can i get this with the gavick menu?

Hi

Can You please show me a page You are working on. I need to see how You've made submenus to answer that.

Hi

You can get it with gkExtraMenu and some additional css. Unfortuantely I cannot tell exactly before I see this working on Your site and will be able to check the code used for it.

I uploaded the quickstart to my site with no changes yet.
I sent you a link to the site in a private message.
Thanks!

Hi

You can get it with gkExtraMenu and some additional css. Unfortuantely I cannot tell exactly before I see this working on Your site and will be able to check the code used for it.

Hi

Ok. But this is a clear quickstart and I wanted to see how You have it after looking to the manual I gave You. If You want I can make You an example of a complexed submenu with 3columns and modules in it. If Yes please send me an access to joomla panel.

Check your inbox.
Thanks!

Hi

Ok. But this is a clear quickstart and I wanted to see how You have it after looking to the manual I gave You. If You want I can make You an example of a complexed submenu with 3columns and modules in it. If Yes please send me an access to joomla panel.

Hi

Please see a behavior of Templates option in menu. I've made it by only manipulating settings in menu item options. You can also select one of available module positions and show whatever You want in it. With this functionality You will have it fork like on the example You've shown me.

The dropdown starts below each main menu item.
How can i get all of them to start at the same point under the logo on the left like http://www.cbsnews.com/
See the menu items (Template and Template 2) with 5 columns each on my site.

Hi

Please see a behavior of Templates option in menu. I've made it by only manipulating settings in menu item options. You can also select one of available module positions and show whatever You want in it. With this functionality You will have it fork like on the example You've shown me.

Hi

A 100% width for submenu can be achived with this code:

Code: Select all

.gkMenu > ul div.childcontent {
    left: 0 !important;
    width: 100% !important;
}


Which file do i place this in and on what line?

Hi

A 100% width for submenu can be achived with this code:

Code: Select all

.gkMenu > ul div.childcontent {
    left: 0 !important;
    width: 100% !important;
}


Hi

Any CSS modifications should be stored in override.css file. Please remember to enable using override in template settings.

This is good!
Can we get it to start below the logo instead of the first (Home) menu item?
Plus, when i refresh the page, a menu appears for a second without any hover or click.

Hi

Any CSS modifications should be stored in override.css file. Please remember to enable using override in template settings.

Hi

The appearing will be unnoticable when cache will be enabled.

Menu width is the point to start, but I think You can resize it with adding some margins to it:

Code: Select all

.gkMenu > ul div.childcontent {
    left: 0 !important;
    width: 100% !important;
    margin-left: -200px !important;
}


Hi,
I purged the cache but the menu still appears for a second without any hover or click when i refresh the page.
Plus, I am having difficulty adding a module position. Can you please login and add one so i can see how it works?
Thanks

Hi

The appearing will be unnoticable when cache will be enabled.

Menu width is the point to start, but I think You can resize it with adding some margins to it:

Code: Select all

.gkMenu > ul div.childcontent {
    left: 0 !important;
    width: 100% !important;
    margin-left: -200px !important;
}


Hi

I've just published the module You have set. You forgot to attache it to menu items.

About visible submenu, I've meant that it will not be visible when cache wll be enabled not to clear cache. You should enable cache and compression when all work to the website will be finished.

Hi,
How can i control the menu width of each column in the dropdown like http://www.nfl.com/
Thanks!

Hi

I've just published the module You have set. You forgot to attache it to menu items.

About visible submenu, I've meant that it will not be visible when cache wll be enabled not to clear cache. You should enable cache and compression when all work to the website will be finished.

Hi

You can add a class with option: "Additional class" and set a width thanks to that.

For example You use a class " w200" and than add to css:

Code: Select all

.w200 {
width: 200px !important.
}


Hi,
I copied and pasted your code into the override file and changed the width to 300px.
I typed w200 into Additional class field for the "Layout" menu item and created a custom HTML module in menu2.
The image is sized down to the original width of the column and not 300px.
What am i doing wrong?
Thanks!

Hi

You can add a class with option: "Additional class" and set a width thanks to that.

For example You use a class " w200" and than add to css:

Code: Select all

.w200 {
width: 200px !important.
}


Hi

For start I do not see a submenu in Your site. Can You please enable it and tell me under which menu option I can see it.

Hi,
Main Menu > Template > Layouts > Banner
Thanks

Hi

For start I do not see a submenu in Your site. Can You please enable it and tell me under which menu option I can see it.

Hi

Ok. I'm blind I do not see Template option anywhere ;/ Need Your help to guide me to that.

That's not my site...
I will resend the link in a private message.
Thanks!

Hi

Ok. I'm blind I do not see Template option anywhere ;/ Need Your help to guide me to that.

Hi

Och, I'm really sorry I have thought this was Your site. Anyway I can see now that it's working differently than I remember, but there is also a solution for a way it's now.

1. Add a class to a top menu element, for example "resize-this"
2. Add this code to css:

Code: Select all

li.resize-this .childcontent,
li.resize-this .childcontent .childcontent-inner-wrap,
li.resize-this .childcontent .childcontent-inner-wrap .childcontent-inner {
width: 1000px !important;
}


to resize whole submenu box.
3. This code in css will resize subcolumns:

Code: Select all

li.resize-this .childcontent .gkcol:nth-child(1) { width: 300px !important; }
li.resize-this .childcontent .gkcol:nth-child(2) { width: 200px !important; }
li.resize-this .childcontent .gkcol:nth-child(3) { width: 300px !important; }
li.resize-this .childcontent .gkcol:nth-child(4) { width: 200px !important; }
li.resize-this .childcontent .gkcol:nth-child(5) { width: 300px !important; }


To set the size of each column. A number in (n) indicates which columns should it resize.

This code works great!
When i set Menu Params (GavickPro) > Group to Yes, the content hangs outside of the columns margins.
Plus, the modules i assign do not look the same as on the site.
Look at my site (remember to check your inbox for link ) and click on the "Template" menu item.
Thanks!

Hi

Och, I'm really sorry I have thought this was Your site. Anyway I can see now that it's working differently than I remember, but there is also a solution for a way it's now.

1. Add a class to a top menu element, for example "resize-this"
2. Add this code to css:

Code: Select all

li.resize-this .childcontent,
li.resize-this .childcontent .childcontent-inner-wrap,
li.resize-this .childcontent .childcontent-inner-wrap .childcontent-inner {
width: 1000px !important;
}


to resize whole submenu box.
3. This code in css will resize subcolumns:

Code: Select all

li.resize-this .childcontent .gkcol:nth-child(1) { width: 300px !important; }
li.resize-this .childcontent .gkcol:nth-child(2) { width: 200px !important; }
li.resize-this .childcontent .gkcol:nth-child(3) { width: 300px !important; }
li.resize-this .childcontent .gkcol:nth-child(4) { width: 200px !important; }
li.resize-this .childcontent .gkcol:nth-child(5) { width: 300px !important; }


To set the size of each column. A number in (n) indicates which columns should it resize.

Hi

I do not quite understand what You are saying But I can advice to use a percentage widths. So than it will work better when used on tablets. Of course a sum of all columns weight needst to be 100.

The look of module depends of styling, so now You need to work on that. I advice to use firebug to catch selectors so You will be able create some now css for it.

Hello teitbite,
When i hover over the page, below the mainmenu, the dropdown menu appears.
Plus, when I try to click items in the drop down menu, it switches to the last mainmenu dropdown (Tech).
How can I fix this? Below is my override.css

Check your Inbox for the URL.
Thanks!

li.resize-this .childcontent,
li.resize-this .childcontent .childcontent-inner-wrap,
li.resize-this .childcontent .childcontent-inner-wrap .childcontent-inner {
width: 1230px !important;
left: 0 !important;
margin-left: 0px !important;
}
li.resize-this .childcontent .gkcol:nth-child(1) { width: 230px !important; }
li.resize-this .childcontent .gkcol:nth-child(2) { width: 230px !important; }
li.resize-this .childcontent .gkcol:nth-child(3) { width: 300px !important; }
li.resize-this .childcontent .gkcol:nth-child(4) { width: 300px !important; }
li.resize-this .childcontent .gkcol:nth-child(5) { width: 200px !important; }

/* news dropdown */
li.news .childcontent,
li.news .childcontent .childcontent-inner-wrap,
li.news .childcontent .childcontent-inner-wrap .childcontent-inner {
width: 1230px !important;
left: 0 !important;
margin-left: -114px !important;
}
li.news .childcontent .gkcol:nth-child(1) { width: 240px !important; margin-left: 20px; }
li.news .childcontent .gkcol:nth-child(2) { width: 250px !important; margin-left: 20px; }
li.news .childcontent .gkcol:nth-child(3) { width: 250px !important; margin-left: 20px; }

/* life dropdown */
li.life .childcontent,
li.life .childcontent .childcontent-inner-wrap,
li.life .childcontent .childcontent-inner-wrap .childcontent-inner {
width: 1230px !important;
left: 0 !important;
margin-left: -114px !important;
}
li.life .childcontent .gkcol:nth-child(1) { width: 200px !important; margin-left: 20px; }
li.life .childcontent .gkcol:nth-child(2) { width: 250px !important; margin-left: 20px; }
li.life .childcontent .gkcol:nth-child(3) { width: 250px !important; margin-left: 20px; }

/* tech dropdown */
li.tech .childcontent,
li.tech .childcontent .childcontent-inner-wrap,
li.tech .childcontent .childcontent-inner-wrap .childcontent-inner {
width: 1230px !important;
left: 0 !important;
margin-left: -114px !important;
}
li.tech .childcontent .gkcol:nth-child(1) { width: 200px !important; margin-left: 20px; }
li.tech .childcontent .gkcol:nth-child(2) { width: 250px !important; margin-left: 20px; }
li.tech .childcontent .gkcol:nth-child(3) { width: 250px !important; margin-left: 20px; }

Hi

I think You are lacking a code like this to make submenu display over everything else:

Code: Select all

.gkMenu > ul > li:hover div.childcontent {
    z-index: 1000;
}


I pasted that in the override.css and saw no change.

Hi

I think You are lacking a code like this to make submenu display over everything else:

Code: Select all

.gkMenu > ul > li:hover div.childcontent {
    z-index: 1000;
}


Hi

I do not see this class in override.css file. Please send me an ftp access to Your site. I'll make it for You.

I will Inbox that to you now.
Plus, the dropdown menu always appears for a moment when I visit a page.
Can you please fix that too and show me what code you added?
Thanks!

Hi

I do not see this class in override.css file. Please send me an ftp access to Your site. I'll make it for You.

Hi

Done with this code:

Code: Select all

.gkMenu > ul div.childcontent {
    display: none;
    opacity: 1 !important;
    height: auto !important;
}

.gkMenu > ul > li:hover div.childcontent {
    display: block;
}


It works fine in Safari and Firefox but I do not see the background color of the dropdown in the Chrome browser.

Hi

Done with this code:

Code: Select all

.gkMenu > ul div.childcontent {
    display: none;
    opacity: 1 !important;
    height: auto !important;
}

.gkMenu > ul > li:hover div.childcontent {
    display: block;
}


Hi

Try replace this code with:

Code: Select all

.gkMenu > ul div.childcontent {
    display: none;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

.gkMenu > ul > li:hover div.childcontent {
    display: block;
}