Slider Element resizing problem if inserted into Header Builder

[agenzia_gamma]

Hello support

In consideration of the fact that the following BUG has not been solved yet, I have looked for an alternative solution to create a SUB-MENU, using the new SLIDER element.

Header > Container > Content Scrolling: doesn't seem to work properly after the last update

Hey Daniele, This looks like a bug. On my site, I have managed to show the navigation buttons by setting the Width of the Content Sizing but the buttons aren’t working properly so what I’ll do is post this in our issue tracker so this will be queued for investigation by our development team. [image] For now, regretfully, please turn off the Button Navigation as there is no temporary solution. We’re sorry for the inconvenience.

I then created the SUB-MENU with SLIDER element and everything works fine when the slider is inserted in a section of the page. But when the slider is inserted in a CONTENT of the Header Builder, the SUB-MENU creates problems with the resizing (it is no longer responsive).

Please take a look to the following page,

Test

where you can find:

• the sub-menu into the header (WITH the resizing issue)
• the same sub-menu into the page (WITHOUT the resizing issue)

Thank You

[ruenel]

Hello Daniele,

Thank you for the very detailed post information. You will have to set the Sizing of the Row element to have a 100% maximum width, your Bar settings will have a maximum of 100% while your Container element will have a maximum width of 1200 pixels.

Hope this makes sense.

[agenzia_gamma]

Hi Ruenel

Now it’s working like a charm!!!

Very very thanks

Just another thing:
Iin consideration of the fact that I use a button slider as a Menu, is it possible to insert a function (Javascript ???) that allows me to highlight the button with the active link?

[tristup]

Hi Daniele,

Glad that it worked for you. It is not very clear about the Button Slider you mentioned, but you can add the custom JavaScript code into the Page JS or Theme Options > JS and called using the ID or Class selector.

You can also add the JavaScript code into the Slider Navigation button in the similar way described above.

Hope it helps.
Thanks

[agenzia_gamma]

I’m sorry

The page where you can find the Sub-Menu Button Slider into this page:

Importare Auto dall'Austria

in consideration of the fact that I use a button slider as a Menu, is it possible to insert a function (Javascript ???) that allows me to highlight the button with the active link?

Thank You

[tristup]

Hi Daniele,

I have investigated the page and found that the button in the slider is linked with the different language versions pages. You can get the specific page URL using the Dynamic Content tag {{dc:url:segment index="2"}} which will return the following for different languages.

importare-auto-dalla-grecia
importare-auto-dalla-germania

So you can set the condition based on the return value of the {{dc:url:segment index="2"}} and show the Active button for the specific Language. As an example, you need to add two different buttons for each language one is in active mode and will be visible if the Dynamic Content tag returns the specific URL for that language only.

I would suggest you go through the following thread, which may help you on this.

Condition based on URL structure

Hey @RubberDuckers, I’ve consulted with Alex, our core developer and he pointed me that you can use {{dc:url:segment}}. Not specifying an index will get the first directory. When I answered previously, I was testing with Index that’s why nothing works. For example, you could test de from example.com/de/page/another-page-child. That means the element will display if the language is de. [image] I’ve tested the setup out and it works. Hope that helps.

Hope it helps.
Thanks

[agenzia_gamma]

Dear tristup

Thank You for you support

My site has not different language. I have only one language (italian).

The different flags are links to the corresponding countries for which we offer our car import services. But all the pages are in Italian.

I’d like to highlight the button for the active link. Something similar to the function found in the menus:

setInterval ( function(){ 

jQuery('.current-menu-item a').addClass('x-active');
jQuery('.current-menu-item a .x-particle').addClass('x-active');

 }, 500 );

something similare to active links function:

But in my Menu created with Slider Element (due to the bug mentioned at the beginning of this post)

Thank You

[ruenel]

Hello Danielle,

The JS code above does not apply to the sliders and cannot be used in the slider because it has a different structure. you may be able to accomplish what you want by doing it manually. You can follow these steps:
1.) Edit each of your pages.

2.) Add a body class in the Page Settings:

3.) In your Slide element, you need to insert a {{dc:looper:field key="title"}} dynamic content to the element Class field.

4.) Lastly, you can add a custom CSS that will display the particles of the Slide element something like this:

.Francia .x-slide.Francia .x-particle {
    opacity: 1;
    transform: scale3d(1, 1, 1);
}

The code above is just an example code to get you started with your customizations. You will need to do steps 1 and 2 to all your pages and then modify the code above so that when you view the page, the slide’s particle will be displayed thus, the slide menu seems to be active while viewing the page.

.{Menu-Title-A} .x-slide.{Menu-Title-A} .x-particle,
.{Menu-Title-B} .x-slide.{Menu-Title-B} .x-particle,
.{Menu-Title-C} .x-slide.{Menu-Title-C} .x-particle{
    opacity: 1;
    transform: scale3d(1, 1, 1);
}

where Menu-Title-A, Menu-Title-B or Menu-Title-C is the menu item titles or your page titles.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[agenzia_gamma]

Thank You very very much !!!

I made some changes because sometimes “title” contains spaces, but it works great !!!

Thanks again

Always 5 stars support

[ruenel]

You are most welcome, Daniele!