Still having problems with Masonry Gallery after update - 4.0.7 - Support

Tagged: ismael

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
May 17, 2017 at 10:32 am #794746

m9491
Participant

Since update 4.0.5 I’ve had trouble with the masonry galleries on my website (see attached images). Either they show none of the images or they only show three (the last one is hiding behind the first image). I can see that this new update should’ve fixed it, but it hasn’t in my version. I’ve done the usual checkup whether it has something to do with plugins, but it hasn’t.

Can you help?

Best regards,
M

May 17, 2017 at 12:18 pm #794817

Rikard
Keymaster

Hey m9491,

Please see private to see what I’m seeing on my end, is that correct?

Best regards,
Rikard

May 17, 2017 at 12:43 pm #794840

m9491
Participant

Hi Rikard,

We’d forgotten to clear the cache. That fixed it, so now it works again.

I have one more thing. I’ve inserted a custom menu icon for the responsive pop-up menu. It used to work fine with the hamburger icon always showing, but now it’s hidden behind the responsive menu that pops up. I can’t seem to fix it with z-index. Do you have an idea as to what is causing this?

Best regards,
Mariann

May 17, 2017 at 1:04 pm #794852

Nikko
Inactive Moderator

Hi,

Are you referring to the search icon?

Best regards,
Nikko

May 17, 2017 at 1:09 pm #794859

m9491
Participant

No, the hamburger icon.
Right now the original enfold theme closing button is showing so we can close the menu again, because the hamburger icon is hidden behind the black menu bg.

May 19, 2017 at 7:18 am #796375

Ismael
Moderator

Hi,

Thank you for the info.

How did you enable the hamburger icon on mobile view? By default, it’s intended to work on desktop view only.

Best regards,
Ismael

May 19, 2017 at 10:29 am #796452

m9491
Participant

Not sure what you mean by “it’s intended to work on desktop view only”.
But I’ve changed the following codes:

– avia.js (see image 1) – to change the ID that toggles the mobile menu
– helper-main-menu.php (see image 2) – to place the hamburger icon where your original mobile menu icon is
– function.php (see image 3) – JavaScript that creates the cross animation
– custom.css (the one under Enfold options on dashboard)

Hope this helps to understand what I did.

Best regards,
M

May 22, 2017 at 3:58 am #797352

Ismael
Moderator

Hi,

Where did you get those modifications? I don’t think they’re valid. Do you want to enable the menu icon? Please go to the Enfold > Header > Header Layout then set the “Display of menu items” as “Display as icon”.

Best regards,
Ismael

May 22, 2017 at 9:26 am #797484

m9491
Participant

Hi,

Which mods are not valid? Do you have another solution as to how to make an animated hamburger icon?
The only problem I have with the current solution is that after the update 4.0.3 the animated hamburger icon hides behind the pop-up menu’s black background. Z-index doesn’t seem to work, but you know the code better, so maybe you know what is causing the problem?

We want an animation with the hamburger icon (so the lines animates into a cross and back again on toggle), which enfold’s default mobile icon does not do. I’ve used this link: https://kriesi.at/support/topic/animated-hamburger-mobile-menu-icon/ and the rest should be simple.

Best regards,
M

May 23, 2017 at 5:27 am #798047
Ismael
Moderator
Hi,

Do you have another solution as to how to make an animated hamburger icon?

The hamburger icon (avia_hamburger_menu) is a default feature of the theme so you don’t need to do those modifications. Please remove the modifications then add this code in the functions.php file:
```
//first append search item to main menu
add_filter( 'wp_nav_menu_items', 'avia_append_burger_menu', 9998, 2 );
add_filter( 'avf_fallback_menu_items', 'avia_append_burger_menu', 9998, 2 );

function avia_append_burger_menu ( $items, $args )
{
    if ((is_object($args) && $args->theme_location == 'avia') || (is_string($args) && $args = "fallback_menu"))
    {

        $items .= '<li id="menu-item-burger" class="av-burger-menu-main menu-item-avia-special">
        			<a href="#">
						<span class="av-hamburger av-hamburger--spin av-js-hamburger">
				        <span class="av-hamburger-box">
					          <span class="av-hamburger-inner"></span>
					          <strong>'.__('Menu','avia_framework').'</strong>
				        </span>
						</span>
					</a>
        		   </li>';
    }
    return $items;
}
```
In the Quick CSS field, use this:
```
@media only screen and (max-width: 767px) {
	.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
	    display: block !important;
	}

	#top #avia-menu .menu-item-search-dropdown, #top .av-main-nav li {
    	display: none;
	}

	#top .main_menu {
    	position: absolute;
	}

	#top #advanced_menu_toggle, #top #advanced_menu_hide {
		display: none !important;
	}

	#top .av-main-nav li {
	    bottom: 80px;
	}

	#top #menu-item-burger {
    	display: block !important;
	}

	.av-burger-overlay {
	    z-index: 1;
	}
}

@media only screen and (min-width: 768px) {
	#top #menu-item-burger {
    	display: none !important;
	}
}
```
Best regards,
Ismael
May 23, 2017 at 9:46 am #798122
m9491
Participant
Hi Ismael,

I tried inserting the code and it works fine. It did, however, trig some issues.
1. 1. The box in the top with the language change is visible when opening the menu
2. 2. On desktop a hover function makes the menus open when hovering over them. This is not supposed to happen
3. 3. The code below, making sure that an active menu is underlined, stopped working. You can find the source of the code here: https://kriesi.at/support/topic/highlight-current-parent-menu-in-mobile-menu/
Also, this does animate, but not in a smooth way like this: http://codepen.io/stevenfabre/pen/LGvzk which is what we aimed for.

Best regards,
M
```
function add_custom_script(){
?>
<script>
$(window).load(function () {
  $('#mobile-advanced li > a').on('click', function() {
   $(this).toggleClass('menu_underline');	  
  });
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');
```
May 24, 2017 at 3:26 pm #798950
Ismael
Moderator
Hi,

Also, this does animate, but not in a smooth way like this: http://codepen.io/stevenfabre/pen/LGvzk which is what we aimed for.

It’s not animating properly because the transition property is disabled by the following css modification.
```
.av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after {
    transition: none !important;
}
```
Again, this is not a default feature of the theme so we provided a workaround. Unfortunately, we can’t help you with the rest of the customization or improvements. Please hire a freelance developer or contact our partner, Codeable.

// http://kriesi.at/contact/customization

Best regards,
Ismael
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

Still having problems with Masonry Gallery after update – 4.0.7