goldilocks

Hi Tom,

Thanks for getting back to me. I was worried you might say it’s z-index related and therefore not possible!

I started out by researching methods for applying the greyed out effect via an additional div on hover before realising the shadow might just do it for me… I will go back to my research!

Many thanks
Becca

Thanks so much for your continued help, Tom. You’ve solved it!

Here was the problem and the solution in case anyone else has the same situation:
The site is based on a child theme of Storefront (which has its own mobile menu but isn’t as good as yours), but I have customised the theme a fair amount.

The menu was working perfectly until the screen size was smaller than 568px, which is the responsive breakpoint I have specified in Max Mega Menu settings.

I had a custom version of megamenu.scss within my child theme (saved within a folder called ‘megamenu’), which I’d totally forgotten about. I think I originally did that when I built the site to further customise the styling.

The solution was to download the latest version of megamenu.scss from plugins/megamenu/css and save it over the file already in my theme. Then upload that file, resave my menu in WordPress, regenerate the css in mega menu’s tools and then and empty the cache for good measure.

It’s now working as it should (apart from my custom styling in the mobile menu!).

Thanks Tom!

Hi Tom,

I’m using the plug in as it is (stylehseets and all) with some minimal additional styling in the plug in settings (in the ‘CSS Editor’ box at the bottom of the theme editor page). I do also have a couple of styles within my child theme’s .css, but haven’t edited that for a long time.

I’m also having trouble working out what’s going on because it seems to have stopped working overnight with no changes to the site.

I think the issue must be something with W3 Total Cache but I’m at a loss as to what because disabling the whole plug in doesn’t bring back the mobile menu!

I’m afraid I’m giving up. The code I have ended up with, which doesn’t work, is:

In my template header:

define('GOOGLE_MAPS_V3_API_KEY', 'MY API KEY HERE');

add_action('wp_enqueue_scripts', 'so_exhibitions_map_scripts');
function so_exhibitions_map_scripts() {
    wp_register_script('googlemaps', 'http://maps.googleapis.com/maps/api/js?hl=en&key=' . GOOGLE_MAPS_V3_API_KEY . '&sensor=false', false, '3');
    wp_enqueue_script('googlemaps');

    wp_register_script( 'so.maps', get_bloginfo('stylesheet_directory') . "/js/so.maps.js", array('jquery', 'googlemaps'), false, false );
    wp_enqueue_script('so.maps');

  $locations = array();

    $location_query = new WP_Query( array(
        'meta_key' => '_simple_fields_fieldGroupID_1_fieldID_12_numInSet_0',
        'posts_per_page' => -1
    ) );

    while ( $location_query->have_posts() ) {
        $location_query->the_post();
				 $key = simple_fields_get_post_value(get_the_id(), array(1, 12), true);
  				$lat = $key["lat"];
				$lng = $key["lng"];
        $locations[] = array(
            'title' => get_the_title(),
            'latitude' => $lat,
            'longitude' => $lng,
            'id' => get_the_ID()
        );
    }

    wp_reset_postdata();

    wp_localize_script('so.maps', 'php_args', array(
        'locations' => json_encode($locations)
    ));
}

get_header();

In the template body:
<div id="map_canvas"></div>

In another file called so.maps.js:

(function($) {
    function initialise_map() {
        var locations_str = php_args.locations.replace(/"/g, '"');
        var locations = $.parseJSON(locations_str);

        var latlng = new google.maps.LatLng(MY DEFAULT LAT, LNG);
                var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    }

    function addMarker(locations, map) {
        var locationLatLng = new google.maps.LatLng(locations.latitude,locations.longitude);
        bounds.extend(locationLatLng);
        var marker = new google.maps.Marker({
            position: locationLatLng,
            map: map,
            title:locations.title
        });
    }

    $(function() {
        initialise_map();
    });

})(jQuery);

Any ideas?

Thanks Pär,

However, that doesn’t work. I just tested it without the map with your suggestion on another page and I cannot even get it to echo any of the content contained within that field.

Eg

$field_slug = "simple-fields-field-googlemaps";
$location = simple_fields_value($field_slug);
$lat = $location["lat"];
$lng = $location["lng"];

echo $lat;

I’ve searched through the documentation, but can’t find anything that tells me how to output the googlemap field, let alone display the locations on a map. Have I missed something?