Few bugs and style issue

domir21

Hi!
I continue some issues from this post:
https://www.joomlart.com/forums/d/48527-hero-and-background-image-issue

In this page: https://stronywtoruniu.co.pl/oferta/2-systemy-ekspozycyjne - empty space on the left site - can we delete it? "Link:"
This element need to be delete and I don't see an option for this.

Can we use the same layout like on this page: https://stronywtoruniu.co.pl/oferta/2-systemy-ekspozycyjne ?
"PRODUKTY" button doesn't work - it is impossible to click on it and go to the page: https://stronywtoruniu.co.pl/oferta/
it works only as a drop menu.
Could we invert colors in module "NASZA RODZINA"? White background and black text colors?

And set them the same height?
Can we set the voice for a YT video on this website?

Thank you in advance!
D.

dominic

Hi domir21,
1/ This is a social sharing section, you can add the following CSS code to the site:

.link-social {
    display: none;
}

2/ This is the section from the masthead module, you can go to the backend > Site modules > find the masthead module and open it to remove content for this page.

3/ The template does not support clicking the parent menu item when has a submenu. We are checking it, will provide a solution as soon as possible.

4/ You can open this module go to advanced tabs and add the custom class to the Module Class, you can use the following CSS code:
Eg: I have used the "has-bg-white" class:

.has-bg-white {
  background: #fff;
  padding: 50px 0;
}

.has-bg-white .section-title.h2 span {
  color: #000;
}

.has-bg-white .acm-teams.style-1 .teams-item {
  background: #fff;
  border: 1px solid #999;
   height: 100%;
}

.has-bg-white .acm-teams.style-1 .teams-item .teams-text h4 a, .acm-teams.style-1 .teams-item .teams-text .h4 a {
  color: #000;
}

.has-bg-white .acm-teams.style-1 .teams-item .teams-text span,
.has-bg-white  .acm-teams.style-1 .cw-owl-nav span {
  color: #3b92de;
}

.has-bg-white .owl-carousel .owl-stage {
    display: flex;
}

5/ Could you let me know details about this question?

domir21

Hi dominic - thank you so much for all those things!

So I will waiting fo the solution to the 3th question.

About the 5th: When you open our site the voice from the youtube video should be ON. Now there is no sounds from it. I mean the video from hero module.
Have a nice day!
D.

dominic

Hi domir21,
About the video,
Unfortunately, achieving autoplay with sound on YouTube embeds is not possible due to browser restrictions. This is implemented to prevent disruptive user experiences caused by automatic audio playback.
If you want to unmute the video,
You can keep the current implementation and let the user manually unmute and play the video. This is the most user-friendly approach, giving users control over sound and playback.

domir21

Hi dominic 🙂

Did you find more info about:
" 3/ The template does not support clicking the parent menu item when has a submenu. We are checking it, will provide a solution as soon as possible. "
?

dominic

Hi domir21,
I customize the template to allow clicking the parent menu. I will provide a solution tomorrow.

dominic

Hi domir21,
You can add the following CSS code to your site:

.t4-navbar .nav-item.dropdown.parent {
  width: 100%;
}
.mobile-click .item-caret {
  position: relative;
  z-index: 2;
  width: 25px !important;
  height: 25px !important;
  background: #000;
  border-radius: 3px;
}

And the following jquery to the Backend > site template styles > ja festival > Global settings > Custom Code > Before </body>

<script>
$(document).ready(function() {
    // Function to check if click occurred outside the specified elements
    function isClickedOutside(clickedElement, targetElements) {
        for (var i = 0; i < targetElements.length; i++) {
            if (clickedElement.closest(targetElements[i]).length) {
                return false; // Clicked inside one of the target elements
            }
        }
        return true; // Clicked outside all target elements
    }

    // Click event handler for the icon
    $('.mobile-click .item-caret').click(function() {
        if ($(window).width() < 768) { // Check if the screen width is less than 768px (typical mobile width)
            // Add class to <li> element
            $('li.nav-item.parent').addClass('show animating');

            // Add class to <div> element
            $('.mobile-click div.dropdown-menu').addClass('show');
        }
    });

    // Click event handler for the document body
    $(document.body).click(function(event) {
        var clickedElement = $(event.target);
        var targetElements = ['.mobile-click .item-caret', 'li.nav-item.parent', '.mobile-click div.dropdown-menu'];

        if (isClickedOutside(clickedElement, targetElements)) {
            // Remove class from <li> element
            $('li.nav-item.parent').removeClass('li.nav-item.parent');

            // Remove class from <div> element
            $('.mobile-click div.dropdown-menu').removeClass('show');
        }
    });
});
</script>

Open the \templates\ja_festival\html\mod_menu\default_component.php,from line 45 to 54.
Replace with the following code:

if($item->deeper){
	if(isset($item->mega_sub)){
		$attributes['class'] .= ' mobile-click dropdown-toggle';
	}
	$attributes['role'] = 'button';
	$attributes['aria-haspopup'] = 'true';
	$attributes['aria-expanded'] = 'false';
	// $attributes['data-bs-toggle'] = 'dropdown';
	// $attributes['id'] = 'navbarDropdown';
}

Hope this helps!

domir21

Hi dominic thanks! 🙂 <3