Thanks Mike – I did actually get it to work on another thread – https://kriesi.at/support/topic/row-collapse-order-2/
Seemed a simpler way around it.

Thanks Victoria
I originally tried something with a custom CSS class in the columns which didn’t work. I have now added a custom ID to each column – where would that go in your CSS please?

Hey Rikard – I have just found the ‘style as button (colored) ‘ option in the menu!!
How I didn’t see that before I’ll never know – it was not through a lack of looking.
I even found the option to give it a border radius :)
The only issue I am facing now is to be able to reverse the collapse order of the 2 50% wide columns for mobile display – I have another thread running for that.
Thanks for your help!

There is another thread I have been looking at #1022098
In there Ismael offers a couple of code snippets – the first I can’t seem to make work at all, it just breaks the display and the second reverses the rows on the page from top to bottom. He also links to a page about the Flex options, which do seem that row-reverse and column-reverse are standard features but I’m not clever enough to implement them. Could either if them look again at the issue as I think it should be a simple solution. I’d be really grateful, as I have spent hours on a site and it’s looking like if I can’t get the rows to collapse this way on mobile I will lose the job or have to start over with another theme.

Thank you Victoria – that worked a treat.
Sorry – I made the site live and activated a secure cert so things were pointing in a new direction by the time you got there. It was only a little problem!

Thank you – perfect! I am always learning…

Thanks Mike – I tried that (cleared cache etc.) however the outcome is the same. I made a separate small change to the layer slider to prove that I was seeing a modified version but still the same.
I can only assume it’s chrome being security fussy. A bit annoying really.

Hi – I have tried that, but the same thing happens.
The layer slider loads, the other layers play out, but the video, which is set as a background video does not run, although it displays a play icon, that does not work either.
This works fine on Firefox and edge but not Chrome.
Any other thoughts?

That’s what I wanted to hear :) I told my client as much – think he needed a 2nd opinion.
Cheers

Thanks Victoria – that’s done it!
One last question – I tried following up on a couple of posts about replacing the ‘burger’ with an image of the word ‘Menu’ which was a request from the client. I didn’t manage to make that work either – is this something that should be simple to do?
Thanks again everyone for helping me.

I can’t see how to send attachments so I will describe.
On the homepage at http://www.solid-steelband.com/wordpress there is a layer slider below which is an image placed in a color section with custom class which is supposed to hide it above 1024px but it doesn’t.
Also, the burger menu does not show up on iPad landscape – it does on portrait. So I have no menu at all on iPad landscape.
The full CSS is descrived below.
(how do I send attachments?)
—————————————————–
CSS in General Styling:
——————————————————
#top #header_meta .phone-info {font-size:16px; color:black;}
@media only screen and (max-width: 990px) {
.av-main-nav > li > a { padding: 0 5px; }
}
.main_menu ul:first-child > li > a { font-size: 15px; }
#top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a:hover .avia-menu-text{
color: #c3512f !important;
}
.avia-menu-fx {
bottom: 10px;
}

@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}

—————————————
CSS in child theme styles.css:
——————————————–
@media only screen and (min-width: 768px) and (max-width: 1024px){
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special,
.html_header_top .av_bottom_nav_header .av-logo-container .main_menu {
display: block;
}
}
/*—————————————-
// CSS
// Toggle view
//————————————–*/

/* Desktop */

.mobile-only{
display: none;
}
.desktop-only{
display: block;
}
/* Mobile */
@media only screen and (max-width: 767px) {
.mobile-only{
display: block!important;
}
.desktop-only{
display: none!important;
}}

Good morning
Thanks – that’s fixed the burger menu and now it’s all fine on tablet and phone.
One last thing I cannot fix is losing the image which replaces the layer slider on desktop.
I was given this CSS:
/*—————————————-
// CSS
// Toggle view
//————————————–*/

/* Desktop */

.mobile-only{
display: none;
}
.desktop-only{
display: block;
}
/* Mobile */
@media only screen and (max-width: 767px) {
.mobile-only{
display: block!important;
}
.desktop-only{
display: none!important;
}}
I have added the class .mobile-only to the color section holding the image but it displays on desktop size too.
What have I missed?

Sorry, should have realised. The site is really just a testing ground – I have it working again, but updating the theme seems to break it. Please have a look first at the Videos page where I have set 3 MP4 videos (all the smae file). Ideally I’d like to see it work a bit like your documentation videos, or to pop up in a lightbox.
Link in the box below.

Please see below.

Well, it’s a different question, but I am wondering how to fit all the requested menu items on screens that are narrower than 1920 but not tablet/phone size. I’ve hacked it a bit, but unless there’s a tidy way of wrapping the menu items before they overlap the logo I’m not sure what to do. I’ve suggested to the client he nests some of them – would you be able to wrap them – without the indicator I think – at the point before they clash with the logo if you see what I mean?
If this should go elsewhere, just close the thread and I’ll see how it evolves.
Thanks.