Need help with superfish mobile responsive menu

HTML & CSS
41

Hi Paul - I think that horizontal scroll bar must’ve been triggered by the last two children in the menu, not by any of the elements above menu, which were all working ok before I added the menu!

(1) I’d like to make the last dropdown under “About” a narrower width. All I could find in superfish is:

.sf-menu ul {
    min-width: 12em; /* allow long menu items to determine submenu width */
    *width: 12em; /* no auto sub width for IE7, see white-space comment below */
}

which applies to the ul, not the li. Please can you tell me how to make just that last dropdown column narrower?

I tried adding a width to:

.sf-menu li.end ul{left:auto;right:0;}

but that didn’t work.

(2) Why does “end” have this in the html – class=“sf-with-ul” – when there’s no .sf-with-ul in the css?

thanks! Val

42

Those items have nothing to do with the scrollbar because they are aligned right to the menu and can’t possibly extend further than the main top level. There is no need to mess with their width unless its for some aesthetic reasons.

You’ve already added a class called end to the last two items so you could use that to reduce the width although there is no reason to do so.

.sf-menu li.end ul{min-width:9em}

That class was for the arrows which you seem to have removed.

43

thank you! Menu is now complete :slight_smile:

44

Hi Paul - in mobile menu, is it ok if I just define transition, animation etc and delete for -webkit, -moz, -o and -ms? e.g. we used to define border-radius for everyone, and now all browsers see it. Won’t the other browsers come into line over next 6 months say?

thanks! - Val

45

The best answer is to check on caniuse what the current support for that property is and then make your decision based on the information you see. Caniuse will list whether the browsers supports the unprefixed version and from when so you can make a judgement call that suits the property in question.

Generally though if the effect being used is merely presentational then its not much of an issue but if the property is a structural element (like flexbox) then you are best to sue prefixes and fallbacks.

46

Thank you! Are all the ones in the hamburger menu structural?

47

Not really as you have text on the menu (Main Menu) which tells your users its a menu and the whole menu bar is clickable.

If you didn’t have any text then the icon becomes structural because no one will know its a menu.

48

I guess I’ll just leave all the fallbacks for now. Maybe delete them in 2 years. I just watched a video on Apple watch, so it does look like people will be reading websites on their watch!

I have a new problem. I’d like to use this Ajax testimonials plugin but it only works if I disable all six menu scripts that are last before /body. I tried disabling every single script in my entire html one by one and it’s definitely that group. I couldn’t identify which one in the group it is, although I did try disabling them one by one.

Does that mean there’s no way I can use Ajax?

thanks! - Val

49

I don’t know if this is the issue but you seem to be using 2 versions of jquery. One at the top and one at the bottom.

Only use one version otherwise you will get conflicts.

50

Hi Paul - sorry I know nothing about jquery. Do you mean this which came with superfish:

<script src="1nav/jquery.js"></script>

and this which came with your hamburger menu2.html:

<script>
jQuery(document).ready(function() {
    // hamburger toggle ... etc

If so, which one should I delete? I searched the rest of the template for jquery but could find only those two.

thanks! - Val

51

This script is jquery but you already have a jquery at the top of the page now. Try removing the script above and see if it makes a difference or stops something working.

This is the jquery script you have added at the top (It may have been there already I can’t remember).

<script type='text/javascript' src='http://dev.greensmoothie.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>

Plus you have a jquery migrate plugin which I guess you need for some features you have added.

<script type='text/javascript' src='http://dev.greensmoothie.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

It must have come as a batch with the plugin you obtained.

52

Oh dear - I never added either of those scripts. They’re being added as the page is being loaded – maybe by wordpress? Ralph would know. If he doesn’t see this, I’ll email him. I have no way of deleting either because they’re not in my html template.

thanks! - Val

53

No, don’t delete those delete the one at the end that I showed you in my last post.

This one.

<script src="1nav/jquery.js"></script>
54

Hi Paul - ah that one controls the dropdown in mobile. If I deactivate it, you just see the hamburger menu strip but nothing happens when you click on hamburger!

55

Hi Val,

Apparently wordpress uses jQuery and not $ so you need to change the hamburger function to this and it should work.

<script>
(function($){ //create closure so we can safely use $ as alias for jQuery
 $(document).ready(function() {
    // hamburger toggle
    $("#navwrap").on("click", ".mobile-menu", function() {
        var myNav = $('#menu');
        if (myNav.is(":visible")) {
            myNav.velocity("slideUp", function() {});
        } else {
            myNav.velocity("slideDown", function() {});
        }
        $('.hamburger-menu').toggleClass('hamburger-on');
    });
    // mobile submenu toggle
    $("#navwrap").on("click", '.sf-menu li', function() {
        var thisList = $(this);
        if (thisList.hasClass('mobileShow')) {
            thisList.find('ul').velocity("slideUp", function() {
                thisList.removeClass('mobileShow');
            });

        } else {
            $('.sf-menu li').removeClass('mobileShow');
            thisList.find('ul').velocity("slideDown", function() {});
            thisList.addClass('mobileShow');
        }
    });

 });
})(jQuery);
</script>

You can then remove the jquery script I mentioned before.

Whether that solves your testimonial problem is another matter and you will need to provide an example with the testimonial code in place.

56

hey how cool is that!!! It works :slight_smile: - http://dev.greensmoothie.com/ - the testimonials too…

I picture you in a long black wizard gown with stars on it and a wizard wand that you wave and everything flies into humble obeisance. Wish you would come wave your wand at the weather here. South Africa’s aping England the past week, nearly non-stop rain

57

You’ve been peeking :smile:

Yes it was only 13deg here yesterday mid morning and wet all day. Not bad for the middle of Summer I suppose.:slight_smile: It’s supposed to be drier today but is still only about 17 deg at the moment. I think we are into Autumn early here.

58

oh haha hahaha rolling over with larfta haha peeking…

how miserable autumn before august, lucky you’ve got the web to weave you into its magic spell… until your neck & shoulders & finger-joints ache and you realize it’s time to bundle up & walk the dog in the rain…

59

Hi Paul - in the hamburger menu, is there a way to make the text wrap round into a second line? Currently it gets truncated if it’s wider than 300-odd px.

e.g. under “Shop”, the second li gets cut off at the word “Organic” and doesn’t display the last word “Store” in iphone:

“Entrepreneurs: Earn Weekly w Online Organic Store”

See http://greensmoothie.com/test/1mst.php

thank you! - Val

60

Hi Val,

Yes you can revert the whitespace back to normal when the hamburger is in action so that the text wraps.

Add this:

@media screen and (max-width:889px){
.sf-menu li{
white-space:normal;
}
}