Cardinal 1.93; bugs with map asset and mobile header

[FlawlessWeb]

Ok I’ll wait to see what Ed says…

Can you tell me exactly what changes you made to files and what code you added/where you added it to solve these issues?

[FlawlessWeb]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Regarding the accordion title I added this custom css.

.spb_accordion .spb_accordion_section > h4 a{
padding-left:15px:
}

Regarding the error that’s because the Load minified scripst it’s enabled so the theme it’s using functions.min.js instead of the functions.js

This was what I added around line 3938 to fix the map zoom issue.

var listener = google.maps.event.addListener(mapInstance, "idle", function() { 
                    mapInstance.setZoom(parseInt(mapZoom, 10)); 
                    google.maps.event.removeListener(listener); 
                });

Regarding the X for the closing mobile menu, in Ed dev version is displaying fine and also in mine. He told that probably custom css.

I activate the Cardinal Parent theme and the X looks good. It’s something on the child theme css.

I found out that is because of this css

#mobile-header a.mobile-menu-link span.menu-bars, #mobile-header a.mobile-menu-link span.menu-bars:before, #mobile-header a.mobile-menu-link span.menu-bars:after {
background-color: white !important;
}

Will check with Ed the best way to change the color of the menu icon.

-Rui

[FlawlessWeb]

Hi Rui,

#1. Ok that accordion css resolves the issue

#2. Enabling minified scripts breaks all of the fixes you made in this thread – i.e. the map issue, the mobile menu not closing on browser resize to full width etc.

Will all of your fixes be included in the next theme update in both the full functions.js and the minified functions.js?

#3. Yes you are right this code snippet:

#mobile-header a.mobile-menu-link span.menu-bars, #mobile-header a.mobile-menu-link span.menu-bars:before, #mobile-header a.mobile-menu-link span.menu-bars:after {
background-color: white !important;
}

Is what is causing the strange mobile menu close icon issue. I want to have that as white, so hopefully Ed has a solution for that…

[Rui Guerreiro – SUPPORT]

Yes, I assume the changes will be available in the next version because It’s a theme error.

A new functions.min.js will be created based on the fixed functions.js

Will ask Ed when it comes online later today about the white icon.

-Rui

[FlawlessWeb]

Ok thanks Rui.

[Rui Guerreiro – SUPPORT]

No problem. I will let you know when I have something.
-Rui

[Rui Guerreiro – SUPPORT]

It’s already working. Ed already provide me the css.

I add it to your style.css of the child theme, it is very similar to the one you had.

a.mobile-menu-link span.menu-bars, a.mobile-menu-link span.menu-bars:before, a.mobile-menu-link span.menu-bars:after {
background-color: #fff!important;
}

-Rui

[FlawlessWeb]

That did the trick, thanks.

[FlawlessWeb]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Guess that content is stripped.

In my opinion I would use the directory asset where you can control the map pin, text and links in a better way and even add an thumbnail image.

Example:(just need to disable the filter and choose to display only in map)

Home

-Rui

[FlawlessWeb]

Ok thanks. I will give the directory asset a go.

Forget about my edited #1. point above. Seems like it has to do with the user color scheme I had set.

[Rui Guerreiro – SUPPORT]

Ok. Great
-Rui

[FlawlessWeb]

This reply has been marked as private.

[FlawlessWeb]

Managed to fix #3.

I had this code in the custom js which I forgot about:

$(':hidden').each(function() {
  var background = $(this).css("background");
  if (background != 'none') {
    tempImage = new Image();
    tempImage.src = backgroundImage;
  }
});

Removed that and the uncaught error is gone. That was a snippet I had got from somewhere on the internet. What I was trying to achieve, without success, is find a way to pre-load the header background image before the page itself loads – the reason I want to do this is so that the background image is always there – currently, and this is especially evident on mobiles while using a slow connection, there is a brief second or two in which the background image does not appear behind the header and it does not look great… any ideas?

Thanks.