CSS dropdown menu on responsive...

[rainbow_pixie_star]

[Note: remember to include site URL, ZC version, list of plugins, PHP version, etc ... read the Posting Tips shown above for information to include in your post here. And, remove this comment before actually posting!]

Hello,
I have been looking for months but i just cannot figure it out. I have the 'Black 100% CSS horizontal dropdown menu' installed.
I would like to know if there is an easy way to dissable it on responsive for tablets and phones when the hamburger menu is in use?
Is there some code that can disable it if that menu is in use by the device?
I did try a couple of other dropdown menu addons also, however this is the only one that I could get to work properly.

If there isnt an way of doing this at all. Can someone suggest a dropdown menu option that I can fully edit and won't show on mobile if a hamburger menu is there?

Than kyou
Amy

[lankeeyankee]

Hopefully someone can chime in here. It's been a long time since I dealt with this, so I'm a bit foggy on details. But if you search online for disable css in mobile view you might get some ideas. I believe you have to put some rules in your stylesheet for min/max widths using @media. Also, the default responsive template might yield some clues, look in css/responsive_default.css

[rainbow_pixie_star]

Hi,
I really hope someone can as it is affecting my mobile versions. I thought there might be a little piece of code I could write in which can turn it off?

I have searched for turning off css on mobile but all i can find is how to turn off the left and right boxes.

I have looked in the responsive files but I just don't know what to change.
I will have another look though.

THank you
Amy

[rainbow_pixie_star]

Don't suppose anyone has figured this out at all?
I am really stuck"

Thank you
Amy

[dbltoe]

Don't suppose either one of you could answer the posting tips? URL? Much easier when we can look at what you are talking about.

[rainbow_pixie_star]

Hi,
Sorry, thought it might be a simple line of code I can add in.

Zencart v1.5.5
Black 100% CSS dropdown addon
craftjam.co.uk

Hope that is everything.

Thank you
Amy

[simon1066]

Did you try this suggestion?

https://www.zen-cart.com/showthread....47#post1359547

[balihr]

I'm trying to understand this, but just can't... What exactly do you want to disable on mobile view? The mobile menu that shows up when you click the hamburger icon? Really confused here, sorry...
BTW, I'd change or hide the annoying social media icons that are fixed to the screen and visible all the time as I scroll... And personally, I'd hide the... Oh wait, I think I understand now.
Attachment 18622
Is that what you're trying to hide?

In your case, this can't be done with just CSS because the mmenu (hamburger menu) seems to be controlled with the MobileDetect.php class and not with CSS so it shows up when a mobile device is detected, and not based on screen size. I believe this is a setting somewhere in your includes/templates/responsive_classic/common/tpl_header.php and you should apply the same to where the other menu is being loaded. It's something like this:

if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {

It's quite hard to give you detailed instructions without seeing the tpl_header.php file but I hope this will get you started.

[dbltoe]

First of all, the drop-down font is way too small on a desktop.

If you want the menu to remain but remove the drop-down options, you can add

.ul.nav-sub{display:none;}

to the appropriate responsive stylesheet. You may be able to accomplish it in the responsive.css or the responsive_drfault.css. If you only want to do it on mobile - responsive_mobile.css. For tablet, responsive_tablet.css. Of course you can decide on landscape, portrait, or both with those last two stylesheets.

Note that the nav-sub method makes the menu wonky as it does not go to a main category when clicked.

If you want the whole menu to go away in responsive, then you would use

#navigation{display:none;}

in the appropriate stylesheet.

The problem with this method is that your hamburger menu does not match your drop-down you're wanting to remove.

Also, in mobile, the Social Icons are distracting.

Small error in that the system is looking for https://craftjam.co.uk/images/footer_images/Home.png and can't find it.

You need to do a 301 redirect to https://craftham.co.uk. Right now, you can get to your site four ways. http://www.craftham.co.uk; https://www.craftham.co.uk; http://craftham.co.uk; and https://craftham.co.uk. No matter what you enter, the 301 should take you to https://craftham.co.uk. That's what your SSL is set for.

[rainbow_pixie_star]

Hi,
Thank you so much for posting that link, I had not seen that message... and it worked!

Got changes to make to the dropdown hamburger anyway and the social buttons are supposed to fix but just seem to want to scroll with the page!
I will have a look into each of the things mentioned one at a time, see if I can work on getting them sorted.

Thank you for all the help!

Amy