Pure CSS Mega Menu

picaflor-azul:

You can use this on 1.5.4. But, this is not responsive so only use it on the desktop layout.

Thanks,

Anne

Hello again Anne,

Could I please ask how it is possible to only use this on the desk top layout and not affect the responsive layout? I'm currently working locally so am not able to view any changes I make on a tablet.

Kind Regards

James

DivaVocals:

I made the recommended changes to change my categories dropdown into a two column display. categories are displayed in two columns..
Hi DivaVocals

I've read through the thread a couple of times and I'm struggling to see the post that shows how to make the category dropdown into a two column display!? Would you be able to point me in the right direction? I realize you did this a while ago but if there's anyway you could help I'd be most appreciative.

Kind Regards

James

James Bond:

Hello again Anne,

Could I please ask how it is possible to only use this on the desk top layout and not affect the responsive layout? I'm currently working locally so am not able to view any changes I make on a tablet.

Kind Regards

James

I believe what Anne meant to say is that Pure CSS Mega Menu mod was intended only for mouse-operated devices (desktops and laptops) and, unless modified for touch-screen devices, should be disabled or not loaded into touch-screen devices, especially those with small screens, (eg pads and mobiles). For touch-screen devices, you should use another menu-type, for example those gracefully supplied by Anne in her responsive templates.

dw08gm:

I believe what Anne meant to say is that Pure CSS Mega Menu mod was intended only for mouse-operated devices (desktops and laptops) and, unless modified for touch-screen devices, should be disabled or not loaded into touch-screen devices, especially those with small screens, (eg pads and mobiles). For touch-screen devices, you should use another menu-type, for example those gracefully supplied by Anne in her responsive templates.

Thanks for the reply.:thumbsup:

Yeah, I managed to implement it on the desktop and it looks great. I've also managed to hide it on all screen sizes up to tablets in the landscape position. I can hide it there too but it does keep flashing up as it traverses from portrait to landscape. I'm doing it through @media so I'm hoping I'll be able to sort it fully at a later date. Thanks once again for your input dw08gm, it really is very much appreciated!

Kind Regards

James.

James Bond:

Thanks for the reply.:thumbsup:

Yeah, I managed to implement it on the desktop and it looks great. I've also managed to hide it on all screen sizes up to tablets in the landscape position. I can hide it there too but it does keep flashing up as it traverses from portrait to landscape. I'm doing it through @media so I'm hoping I'll be able to sort it fully at a later date. Thanks once again for your input dw08gm, it really is very much appreciated!

Kind Regards

James.

If you are using one of my templates that uses php moblie detect you can just create a separate header file for mobile or tablets that does not even call this menu ;-)

Thanks,

Anne

picaflor-azul:

If you are using one of my templates that uses php moblie detect you can just create a separate header file for mobile or tablets that does not even call this menu ;-)

Thanks,

Anne
Thanks for the tip Anne. Would I need to add some code to the tpl_main_page such as If and else statements? At the moment I'm trying this; where tpl_header.php is the one you included with Westminster_new and tpl_header_desk.php is the one I've done with the mega menu.

if ( $detect->isMobile() ) {

$header_template = 'tpl_header.php';
$footer_template = 'tpl_footer.php';
$left_column_file = 'column_left.php';
$right_column_file = 'column_right.php';
$body_id = ($this_is_home_page) ? 'indexHome' : str_replace('_', '', $GET['main_page']);
}else{
$header_template = 'tpl_header_desk.php';
$footer_template = 'tpl_footer.php';
$left_column_file = 'column_left.php';
$right_column_file = 'column_right.php';
$body_id = ($this_is_home_page) ? 'indexHome' : str_replace('', '', $_GET['main_page']);

}

I'm not having much luck, and as a newb I'm not even sure if I'm doing the right thing. lol

rgeards

James

James Bond:

Thanks for the tip Anne. Would I need to add some code to the tpl_main_page such as If and else statements? At the moment I'm trying this; where tpl_header.php is the one you included with Westminster_new and tpl_header_desk.php is the one I've done with the mega menu.

if ( $detect->isMobile() ) {

$header_template = 'tpl_header.php';
$footer_template = 'tpl_footer.php';
$left_column_file = 'column_left.php';
$right_column_file = 'column_right.php';
$body_id = ($this_is_home_page) ? 'indexHome' : str_replace('_', '', $GET['main_page']);
}else{
$header_template = 'tpl_header_desk.php';
$footer_template = 'tpl_footer.php';
$left_column_file = 'column_left.php';
$right_column_file = 'column_right.php';
$body_id = ($this_is_home_page) ? 'indexHome' : str_replace('', '', $_GET['main_page']);

}

I'm not having much luck, and as a newb I'm not even sure if I'm doing the right thing. lol

rgeards

James

Take a look at the includes/templates/override/templates/tpl_modules_mobile_categories_tabs.php file in the Westminster New package for syntax examples for how to call page specific elements.

The header is already set up for this. You can just not call the mega menu in the tpl_header_tablet.php or tpl_header_mobile.php files.

Thanks,

Anne

picaflor-azul:

Take a look at the includes/templates/override/templates/tpl_modules_mobile_categories_tabs.php file in the Westminster New package for syntax examples for how to call page specific elements.

The header is already set up for this. You can just not call the mega menu in the tpl_header_tablet.php or tpl_header_mobile.php files.

Thanks,

Anne

Thank you so much Anne. You really are a star. Thanks for all your help not to mention your fantastic template and menu!

You're the best, many thanks and kind regards I send to you!

James.

James Bond:

Thank you so much Anne. You really are a star. Thanks for all your help not to mention your fantastic template and menu!

You're the best, many thanks and kind regards I send to you!

James.

Great! I am happy to have helped you ;)

Thanks,

Anne

picaflor-azul:

If you are using one of my templates that uses php moblie detect you can just create a separate header file for mobile or tablets that does not even call this menu ;-)

Thanks,

Anne

Thats awesome, I didn't know that. Is PHP Mobile Detect possible to install on other templates that don't have it?

I have the menu set in the stylesheet_mega_menu.css set to float right instead of left.

line 3: .mega-menu li {float:left;

I think it is easier to see and less confusing than above my left side boxes.

But now when you click on Info and there are 3 columns of options, 1 row is off the screen to the right.

Is there a way to make the pull down menu columns shift left instead of left?

the site is horsewalkersbyprowalk dot com

Jeffg23:

I have the menu set in the stylesheet_mega_menu.css set to float right instead of left.

line 3: .mega-menu li {float:left;

I think it is easier to see and less confusing than above my left side boxes.

But now when you click on Info and there are 3 columns of options, 1 row is off the screen to the right.

Is there a way to make the pull down menu columns shift left instead of left?

the site is horsewalkersbyprowalk dot com

You need to add the align_right class to the drop downs that you want to drop down to the right.

Thanks,

Anne

picaflor-azul:

You need to add the align_right class to the drop downs that you want to drop down to the right.

Thanks,

Anne

I could not get that to work, but I did find a suitable fix. I added right padding and moved the menu selections more to the left, so now all the drop down columns show within the page.

.mega-menu li {float:right;padding-right:65px;

FYI - I really like the Sheffield Blue Template. It's very clean and crisp. Perfect for this site.

Jeff

Jeffg23:

I could not get that to work, but I did find a suitable fix. I added right padding and moved the menu selections more to the left, so now all the drop down columns show within the page.

.mega-menu li {float:right;padding-right:65px;

FYI - I really like the Sheffield Blue Template. It's very clean and crisp. Perfect for this site.

Jeff

I am happy that you found something that works for you.

Thanks,

Anne

I would like to modify the mega menu to have a few simple (maybe hard coded) links without drop down. I have some Ezpages that need to be top level links. For example I would like to add an FAQ link.
Sterling Grand has now: Home - Shop - Brands - Info - Contact
I want to add to top level: Home - Shop - Brands - Info - Contact - FAQ

As a second step I'd like to add more top level links and could do without the search box so I have space for more links.

Is there a simple way to achieve this as there are no drop downs involved?

mydanilo:

I would like to modify the mega menu to have a few simple (maybe hard coded) links without drop down. I have some Ezpages that need to be top level links. For example I would like to add an FAQ link.
Sterling Grand has now: Home - Shop - Brands - Info - Contact
I want to add to top level: Home - Shop - Brands - Info - Contact - FAQ

As a second step I'd like to add more top level links and could do without the search box so I have space for more links.

Is there a simple way to achieve this as there are no drop downs involved?

To answer my own question. I found it in Sterling Grand thread:
in tpl_mega_menu.php wherever the link needs to go.

<li><a href="your url here">your link name here</a></li>

How would I go about disabling the menu for mobile devices? I am at a loss, I read somewhere in this thread someone was doing it with @media but I have no idea how to do that. My site uses twitter bootstrap I believe. You can check it out at https://www.oldworldarchery.com

instead of showing all categories in one drop down/column can we show in multiple drop down/columns using mega menu like horizontal dropdown?

I'm having a problem with IE.
I have an iframe in the "Location" dropdown div on the menu and when I mouseover it in IE it closes the Location tab. It does not do this in other browsers and works properly.

below is that code

can someone help me?

thanks

/bof customer service/
define('HEADER_TITLE_LOCATION','Location');
define('TITLE_LOCATION','Dr suite, TX');
define('TEXT_CONFIDENCE','<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3348.576771873294!2d-96.62542988528068!3d32.935778483181444!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864c1da7b650fa0f%3A0x1e0930eb331249d!2s2376+Dr+%23106A%2C+TX+!5e0!3m2!1sen!2sus!4v1462900552387" width="550" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>');

Hi folks - very nice menu & it works fine

However I want my site to have an Amazon like look & the Amazon Mega Menu has a white background and displays a dark lightbox effect covering everything except the menu & header

I wonder does anybody have the CSS code to do this?

I assume its a Z-layer with opacity & layer is a depth below the header & menu which displays on hover?

I would like to get it working this afternoon fingers crossed