swift page builder sticky header (not site sticky header)

[Ken]

Hi guys,

In swift page builder you have the header bar as follows:

Elements Layout Pre-Built Pages Custom Templates Clear All Content

That is a sticky header, so when I scroll down I can continue to select elements, which is great.

However, the Custom Templates only display as a list, not as a grid. I have now got a fair number of custom templates. When working on my laptop (15.6″ monitor) that list drops down off the bottom of the page. If it changed from a list to a grid then it would be fine, or if the header was not sticky then I could scroll down to the bottom of the list. But because the header is sticky I cannot scroll the list.

I also encounter this problem with the Elements drop down. The grid displays in different dimensions before I start scrolling and after the header has gone sticky, and in fact the grid moves from a more horizontal orientation before scrolling to a more vertical (list) configuration. This means that I can never reach the bottom few elements if I have scrolled, I must always go back to the top of the page to where the header is no longer sticky to select those.

At least there is that work-around.

With the custom templates there is no way to select the most recent templates which are at the bottom of the list without plugging my laptop into my 22inch monitor.

But the list has reached the bottom of my 22inch monitor as well, so if I save another template there will be no way to select it.

[Rui Guerreiro – SUPPORT]

Hi,

Never seen this issue before, guess it must be related to the number of templates you have.
Can you provide us admin credentials to your website so we can try to find an alternative?

-Rui

[Ken]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

I will forward this to the developer to see if he can come up with a solution for you

– Kyle

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[Ken]

Correct 🙂

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[Ken]

Hi Rui,

I’ve added the code, and added a screen showing both the custom templates and asses dropdown.

1. Custom templates – the code narrowed the buttons, but they didn’t wrap so there is still no visibility of the bottom of the list. The nav bar is also wrapping funny because of the 500px width, but that is certainly something that I could live with if need be.

2. In the screenshot I’ve also pasted screens of the various dropdown assests – you’ll see in all of them that the bottom of the lists is cut off.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

one of the css was wrong.

Delete this one

.custom-templates-nav{
width:500px!important;
}

And add the code bellow to page-builder.css

.custom-templates-nav .spb_templates_ul{
width:500px!important;
}

pre-built-pages-nav .spb_templates_ul{
width:546px!important;
}

-Rui

[Ken]

Thanks Rui, that was indeed the problem.

If anyone else has the problem, I find this variation of the code works best for me

.spb_template_li {
width: 33%!important;
}

.custom-templates-nav .spb_templates_ul{
width:600px!important;
}

.pre-built-pages-nav .spb_templates_ul{
width:600px!important;
}

ul.dropdown-menu.spb_elements_ul {
    width: 750px;
}

[Kyle – SUPPORT]

Great, thanks 🙂

– Kyle

[Ken]

Now that I’ve changed the page-builder.css file, does that mean I should be using a child theme?

[Kyle – SUPPORT]

No, as you can’t make that change in a child theme. You will have to remember to make the change each time you update the theme

– Kyle

[Swift Ideas – Ed]

Hi @Ken

I’ll check this code and see if it makes sense for us to implement it as standard.

– Ed