Can the dropdown menu be full-width?

hi, this is my website:
http://mediagenesis.com.sg/trek3/

i want to make the submenu / dropdown menu to extend to the full width of my website. see attached jpeg.
i tried adding the following in the override, but it's not effecting the menu at all.

.gkMenu > ul li div.childcontent {
width: 100%;
max-width: 1900px;
}

please help.

Hi

When I follow the link it shows me: "Forbidden. You don't have permission to access /trek3/ on this server. Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request."

Try using it with higher priority:

Code: Select all

.gkMenu > ul li div.childcontent {
width: 100% !important;
max-width: 1900px !important;
}


hi teitbite, thanks for the reply.

the website url should be accessible now.

i added the higher priority codes as you suggested, it didn't work. in fact, the dropdown menu menus are now now in 2 columns instead of the original 3 or 4 columns.

Hi

It's not as easy as I thought, but try this in css instead:

Code: Select all

.gkMenu > ul li div.childcontent {
    left: 0 !important;
    margin-left: 0 !important;
    position: fixed;
    width: 100% !important;
}


than add this to /layout/blocks/head.php

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
$(window).resize(function(){
$('.gkMenu > ul li div.childcontent').each(function(){
$(this).width($(window).width());
});
});
});})(jQuery)</script>


brilliant! it works.

thank you so much, teitbite.

one last thing, there may be a situation where i have fewer columns in the dropdown, so i'd like the columns to be centered. i've added the following code, but it didn't work:

.gkMenu > ul li div.childcontent-inner {
margin: 0 auto !important;
}

when i put a value to it like so, it does center the columns (see jpeg), but is this the most elegant way to do it?

.gkMenu > ul li div.childcontent-inner {
margin: 0 20% !important;
}

thanks you again, teitbite

another thing, when i load my website, a dropdown menu (the last one) appears for a split second before everything loads properly as it should.

any way to resolve that?

Hi

For centering try:

Code: Select all

.gkMenu > ul li div.childcontent-inner {
    margin: 0 auto;
}

.gkMenu > ul > li > .childcontent .gkcol {
    display: inline-block;
    float: none;
    vertical-align: top;
}


For display at start add this to css:

Code: Select all

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

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


and this to /layout/blocks/head.php

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
$('body').addClass('loaded');
});})(jQuery)</script>


Although I'm not sure if it will work ;/ Anyway please try it.

hi teitbite,

the centering works very well. thank you.

unfortunately, the dropdown menu still appears briefly at the start of every reload.

i've added a new column on the brands menu on my website:
http://mediagenesis.com.sg/trek3/

the new column contains a couple of images, how do i force the menu group at the bottom of column 1 to the top of the next column? I want only the two images to appear in column 1.

see attached image. thanks in advance.

Hi

Please take a look at this article https://www.gavick.com/documentation/jo ... nu-modules it will explain how to put modules into the menu.

For menu blinking try a higher priority:

Code: Select all

.gkMenu > ul li div.childcontent {
display: none !important;
}

.loaded .gkMenu > ul li div.childcontent {
display: block !important;
}


Hi

Please take a look at this article https://www.gavick.com/documentation/jo ... nu-modules it will explain how to put modules into the menu.

For menu blinking try a higher priority:

Code: Select all

.gkMenu > ul li div.childcontent {
display: none !important;
}

.loaded .gkMenu > ul li div.childcontent {
display: block !important;
}


hi teitbite,

thanks for your response.

i've already managed to insert modules earlier (as shown in the screenshot in my last post). The modules added are 2 custom modules (represented by two images titled Trek and Rockshox) on the first column under the Brands menu. I just don't know how force the menu group at the bottom of the two modules to appear in the next column.
http://mediagenesis.com.sg/trek3

i've made those codes higher priority, but the result appears the same on several PCs and laptop that i've tested on.

Hi

You need to group this separated menus under one parent menu element. So each column will be a different parent menu element.

For the menu problem please remove the code I gave You before and try this one instead:

Code: Select all

.gkMenu > ul li div.childcontent {
display: none !important;
}

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


hi teitbite,

thank you for being very patient with me. both solutions did not work.

GROUPED MENU ITEMS
i've grouped the menus as you suggested. however in column one, they still appear on top of each other, see attached jpeg (trek3-brands-menu-group.jpg). i don't mind group two and three appearing on top each other but not in column one. i want column one to consist only of the group containing the two modules (with the images). it seems that menus are placed into column based on height.

i went through the instructions on menu modules:
https://www.gavick.com/documentation/jo ... nu-modules
and multi menu columns:
https://www.gavick.com/documentation/un ... mns-plugin

but i couldn't find the answer there.

DROPDOWN MENU APPEARING WHILE LOADING
i've replaced the codes as indicated. however, after placing the new codes, the menu background no longer covers the menu items, see attached jpeg (trek3-flickering-hover.jpg). i temporarily added height: auto !important, that didn't do anything. height: 100% !important covers the entire screen below the menu bar (gkHeaderNav), while this looks ok when there are a lot of items and the menus are tall, but it does not look good when there are only a few items in the dropdown, see attached jpeg (trek3-brands-menu-height100.jpg).

again i appreciate your patience and understanding. thank you.

hi teitbite,

i tested loading my website several times, it appears that the dropdown menu no longer appears a split second at the start, so your new code did work, unfortunately the background colour no longer covers the menu items as before, as mentioned in my previous post.
http://mediagenesis.com.sg/trek3/

Hi

Please send me joomla panel access and ftp access to my private mail [email protected] I'll try to make it.

Hi

Please send me joomla panel access and ftp access to my private mail [email protected] I'll try to make it.

hi teitbite,

i've emailed the ftp and administrator access as you requested.
do indicate the codes / changes you make and to which files.

thank you so much.

Hi

Menu background fixed with code:

Code: Select all

.gkMenu > ul > li > .childcontent .gkcol {
    height: auto !important;
}


it's added to the class I gave You previously, so You will not find it separated.


For columns in submenu issue I think the fact that You have 13 groups in submenus and just 6 columns has something to it. Group them so You will only have 6 groups, one per column so there will be no confiusion for script to place the column in right place.

teitbite,

the menu background works. thanks so much for your help these past few weeks.
i'll figure out the column issue on my own. moving the group containing the modules to the last column appears to be the best way to do it.

thank you again.

gurdip.

Hi

Ok. I'm pretty sure having 6 submenus (one per each column) will give the script no room for self deciding where to put them and will force what we want. But if You made it working with all of those submenus than it's fine with me . Since all is solved I'm closing this thread now.