beatcore

Hi,

my source code is the following:

<div id="cboxOverlay" style="opacity: 0.9; cursor: pointer; visibility: visible;" class="advgb_lightbox"></div>

followed by:

<div id="colorbox" class="advgb_lightbox" role="dialog" tabindex="-1" style="display: block; visibility: visible; top: 330px; left: 663px; position: fixed; width: 578px; height: 438px;"> …

Both have the class “advgb_lightbox“, so i think it’s the Advanced Gutenberg lightbox here. The gallery is the standard Gutenberg gallery. Seems it automatically uses your lightbox.

I solved it like this with my poor coding skills:

1: an Astra custom layout for the whole site (hooks/wp_footer) with JQuery Code. The Links in my menu are all full links with https + URL and stuff:

<script type="text/javascript">
jQuery(document).ready(function($){
	
    $('.scroll').click(function(event) {
        event.preventDefault();
 
        var full_url = this.href;
        
        var parts = full_url.split('#');
        var trgt = parts[1];

        var target_offset = $('#'+trgt).offset();
        var target_top = target_offset.top;

        $('html, body').animate({scrollTop:target_top}, 500);

    });
    
    $('#primary-menu li.menu-item-82 a').click(function(){ //UEBER MICH
         $('#primary-menu li.menu-item-83 a').removeClass('ds-menu-active');
			   $('#primary-menu li.menu-item-84 a').removeClass('ds-menu-active');
			   $('#primary-menu li.menu-item-247 a').removeClass('ds-menu-active');
				 $('#primary-menu li.menu-item-458 a').removeClass('ds-menu-active');
         $('#primary-menu li.menu-item-82 a').addClass('ds-menu-active');
    });
    $('#primary-menu li.menu-item-83 a').click(function(){ //UNTERNEHMEN
         $('#primary-menu li.menu-item-82 a').removeClass('ds-menu-active');
			   $('#primary-menu li.menu-item-84 a').removeClass('ds-menu-active');
			   $('#primary-menu li.menu-item-247 a').removeClass('ds-menu-active');
				 $('#primary-menu li.menu-item-458 a').removeClass('ds-menu-active');			
         $('#primary-menu li.menu-item-83 a').addClass('ds-menu-active');
    });$    
		$('#primary-menu li.menu-item-84 a').click(function(){ //KANDIDATEN
         $('#primary-menu li.menu-item-82 a').removeClass('ds-menu-active');
			   $('#primary-menu li.menu-item-83 a').removeClass('ds-menu-active');
			   $('#primary-menu li.menu-item-247 a').removeClass('ds-menu-active');
				 $('#primary-menu li.menu-item-458 a').removeClass('ds-menu-active');			
         $('#primary-menu li.menu-item-84 a').addClass('ds-menu-active');
    });
		$('#primary-menu li.menu-item-247 a').click(function(){ //JOBS
         $('#primary-menu li.menu-item-82 a').removeClass('ds-menu-active');
			   $('#primary-menu li.menu-item-83 a').removeClass('ds-menu-active');
			   $('#primary-menu li.menu-item-84 a').removeClass('ds-menu-active');
				 $('#primary-menu li.menu-item-458 a').removeClass('ds-menu-active');			
         $('#primary-menu li.menu-item-247 a').addClass('ds-menu-active');
    });		
		$('#primary-menu li.menu-item-458 a').click(function(){ //KONTAKT
         $('#primary-menu li.menu-item-82 a').removeClass('ds-menu-active');
			   $('#primary-menu li.menu-item-83 a').removeClass('ds-menu-active');
			   $('#primary-menu li.menu-item-84 a').removeClass('ds-menu-active');
				 $('#primary-menu li.menu-item-458 a').addClass('ds-menu-active');			
         $('#primary-menu li.menu-item-247 a').removeClass('ds-menu-active');
    });    
});
</script>

2: Added some additional PHP code in my functions.php:

// MENU HIGHLIGHT

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );

function add_specific_menu_location_atts( $atts, $item, $args ) {
    // check if the item is in the primary menu
    if( $args->theme_location == 'primary' ) {
      // add the desired attributes:
      $atts['class'] = 'menu-link-class';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3 );

then some more JQuery for my footer:

<script>
jQuery(document).ready(function($) {
	if ($(window).width() < 884) {
 	$('#primary-menu li a').click(function() {
        if ($(this).hasClass('menu-link-class')){
            $(this).closest('.main-header-bar-navigation').removeClass('toggle-on');
			$(this).closest('.main-header-bar-navigation').css("display", "none");
			$('.main-header-menu-toggle').removeClass('toggled');
        }
    });
	}
});
</script>

3: Added my Style to CSS:

.ds-menu-active {
	color:#e9590f !important;
}

Now i have perfect anchor scrolling, the menu link i click is being highlighted and the mobile menu is closing properly 🙂

• This reply was modified 6 years, 1 month ago by beatcore.

I don’t have the pro version of the plugin, only the free version.
And i’ve already tried this. I have a list of terms and the translation of these, but still no success. Meanwhile it mixes german and english terms when linking to them…

Could you take a look at the site, if i give you access to it?

As I wrote, you’ll have to make a choice between a high pagespeed score and a working Instagram feed 🙂

yeah, i was hoping to get both 😉

thx anyway!

• This reply was modified 6 years, 9 months ago by beatcore.

By excluding

wp-includes/js/dist

it is working, but i get 2 other errors with another plugin then 🙁 And the google pagespeed is worse too because of that exclude.

Hi,

I’ve deleted the german page “Glossar”. Then i set the Index Page ID to the existing english page “Glossary”. Afterwards i’ve been using the “+” in pages to translate the english glossary page to german. But it’s still not working…

The result is, that the english page is working now, but as soon as i want to open the new german page, it automatically redirects back to the english page!!??

Update, still broken: i’ve deleted both pages again. Then i switched to englisch language, set up the english page “glossary”, went to settings and put this site into index page id, the Glossary Terms Permalink is “glossary”. Then i’ve translated the english page into german and refreshed all permalinks. Now both pages are showing, but still only one of the two languages are showing the glossary, in this case the english version which i’ve set up as “Glossary Index Page ID”…

• This reply was modified 6 years, 10 months ago by beatcore.

Thx for the quick answer! Looking forward to it 😉