I just set up a test page with a clone of the slider. The url for the slider’s setting page is also included. All are included in the private section. Let me know if you need anything else to help troubleshoot. Please note we’re doing a bunch of development on the version of the site so let me know if you need to update any of the custom css or anything else that may affect the rest of the site. Thanks!

Through some detective work, I figured out more specifically where the problem lies with the line height and layerslider ignoring its own text styles. Whenever you use opening text transition enabled and apply animation, the text ignore certain text styles–in this case line height. I disabled open text transitions and the line height went back to normal. Ugh, what a pain. Is this something the theme is affecting in Layerslider or a bug in Layerslider? Any ideas of how to fix? Be great to be able to start applying text animation to our sliders. Thanks!

Thanks Victoria, unfortunately that reverted the menu back to it’s original state with the logo aligned left. Here’s the custom css code we’re using supplied within the Enfold documentation. This aligns the logo vertically and horizontally perfectly as well as keeps the menu items balanced on screens wider than 1200px:
/* CUSTOM CENTERED GLOBAL NAVIGATION */
@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(4) {
/* Adjust the width of the logo */
margin-right:360px;
}
#header .main_menu {
/*background: gold;*/
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.av-main-nav-wrap {
left: 50%;
transform: translateX(-50%);
}
#header .logo {
left: 50%;
transform: translateX(-50%);
z-index:999;
}
#header .logo img {
top: 50%;
transform: translateY(-50%);
max-width: 300px;
}
}

It’s when you view the site on smaller screens or shrink the browser window does the mobile menu break. So essentially i’m seeking help to fix the mobile menu when using the Enfold solution for a split menu with centered logo.
Thanks!

Thanks Ismael! Works great.

For future enfold customers is this the script that fixed the problem?
// CUSTOM SCRIPT ANCHOR LINKS TO OPEN SCROLL TO TABBED CONTENT
add_action( ‘wp_footer’, ‘ava_custom_script_tab_section’ );
function ava_custom_script_tab_section() {
?>
<script type=”text/javascript”>
(function($) {
function scrollToTab(s, e,) {
$(s).on(e, function(event) {
var anchor, loc, cur, hash, tab, parent, pos;

if( e == ‘load’ ) {
loc = window.location.hash;
hash = loc;
} else {
loc = $(this).attr(‘href’);
hash = loc.substring(loc.indexOf(‘#’));
}

tab = $(‘.av-section-tab-title[href=’+ hash +’]’);
parent = tab.parents(‘.av-tab-section-outer-container’);
pos = parent.offset();

tab.trigger(‘click’);

if(hash) {
setTimeout( function() {
$(window).scrollTop( pos.top – 100 )
}, 500 );
}
});
}

scrollToTab( ‘.menu-item a’, ‘click’ );
scrollToTab( window, ‘load’ );
})(jQuery);
</script>
<?php
}

// custom script
//add_action( ‘wp_footer’, ‘ava_custom_script’ );
function ava_custom_script() {
?>
<script type=”text/javascript”>
(function($) {
function a() {
$(‘.menu-item’).on(‘click’, ‘a’, function(e) {
var anchor, loc, cur, hash, tab, parent, pos;
anchor = $(this).attr(‘href’);
hash = anchor.substring(anchor.indexOf(‘#’));
tab = $(‘a[href=’+ hash +’]’);
parent = tab.parent(‘.av-tab-section-tab-title-container’);
pos = parent.offset();

tab.trigger(‘click’);
if(hash) $(window).scrollTop( pos.top – 100 );
});
}

a();
})(jQuery);
</script>
<?php
}
?>

• This reply was modified 6 years, 11 months ago by Eric.

Hi Ismael, we turn off access for security purposes. it’s accessible now for you. Please comment on what’s been modified so we can replicate on production. Thanks!

We do have the script added to the functions.php file in the child theme directory and it helped in that the menu anchor link now goes directly to the selected tab. Although the browser still does not scroll down to the tabbed content. The user is expecting to go to the content described in the link but instead may think the link is broken.

Very strange that this used to work as expected last summer ie both anchor links to target tab AND scrolling down the page so all the tabbed content is above the fold.

Ok so we deactivated all the plugins with no change in the menu anchor link behavior. The main issue is the anchor link to the tabs don’t tell the browser to scroll to the tab section on the page. Only if we use a section ID for the anchor will the browser scroll to the tabbed section and then it’ll only open to the tab designated in the tab section edit screen (see screenshot in private area).

Any idea what might be causing this behavior? Thanks!

Thanks everyone! I’ll have my developer make the modifications to the portfolio.php file. I’ll post the solution here for future reference. Thanks!

Ok, it was human error as the portfolio items weren’t categorized properly. Although on a related topic, we were wondering if there’s a way to create a multiple sort / filtering function with the portfolio items using top level categories.

This could eliminate the need to use tabs and give the user a much more streamlined user experience for filtering portfolio items. See private section for examples.
Lastly, is there a way to put the filtering/sort items in a drop down menu for mobile? With the number of filters, it creates a lot of links above the portfolio gallery.

Thanks in advance for your help!