Docs

[john b]

Hello,

This is my first stab at working with a wordpress theme–ever. So I’d appreciate it if you could answer some questions that I have as clear as possible. (Thanks in advance!)

1. I’ve incorporated the accordion shortcode onto a page and was able to include a slider within the body of the dropdown section of the accordion.

My goal essentially is to have the accordion drop down contain a slider (with three rotating images) with bullet points floating to the right of the slider–all within the one drop-down accordion section.

As of right now, the slider I’ve incorporated is as full width as the accordion is and below the slider are the bullet points.

What is the best way (if any) to get to my goal?

2. In the customizer, I’ve set up the header on the homepage as Stacked, with the menu bar below the logo. The header is currently set to white. Below the header, I have a revolution slider with 4 slides, the first 2 slides contain a white background.

The menu bar is set as static, so as you scroll the page, the menu bar remains at the top of the page.

My problem is when the page loads, the header and the first 2 slides blend in together because of the white background. My goal is to incorporate a blue colored line that separates the white header/menu bar from the rest of the pages.

Thanks!

Jason

[Rad]

Hi Jason,

Thank you for dropping by!

1. You could use content band with 2 column inside an accordion content. First column will be the slide, the second will be the bullets.

Just like this :

Make Sure to Set a Title

[content_band no_margin=”true” border=”none” padding_top=”0px” padding_bottom=”0px” ][column type=” one-half” ] Add in your slide here[/column][column type=” one-half” ] Add in your bullets here[/column][/content_band]

2. You could add this css at customizer’s custom css.

.masthead {
border-bottom: 2px solid #007FFF;
}

Hope this helps.

[James]

Hi,

Is it possible to add a responsive slider within the accordion?
I set it up like memtioned above, but the images don’t display on desktop & iPad (but do show up when tab on the direction navigation on mobile device).

[James]

This reply has been marked as private.

[Paul R]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

.page-id-748 .x-slide.flex-active-slide {
     min-width:561px;
}

.page-id-748 .flex-viewport {
     height:auto;
}

Hope that helps.

[James]

Hi,

Thanks for the super fast response!

Just tried with real images (500 × 889) I’ll be using for this feature.
But still have a few issues:
1. Images does not load when open accordion item (desktop broswer), only visible when tap on the navigation or scroll page (iPad/iPhone).
2. Slider not responsive on different devices (i.e. iPad & iPhone).

Please advice, thank you!

[Zeshan]

Hi James,

Please remove the previous given code and use following instead:

.accordion-body.collapse:not(.in) {
   height: 0px;
   overflow: hidden;
   display: block;
}

Thanks!

[James]

It’s working now.
Thank you!!

[Thai]

You’re always welcome.

[Author]

Posts