Docs

[markwest]

Hi Folks,
I wonder if someone could help me please. I’m trying to figure this out myself – but I’m not a coder/dev – so I’m struggling a bit.
I’ve taken a lead from this forum post – https://community.theme.co/forums/topic/mobile-layout-with-navbar/
I’d like to move the sidebar when the site goes mobile – but I’m struggling to make the code work right 🙁
I’m not using page titles – so my main content area has a text element or custom headline, followed by a second text area with a class of main-content.
When the site changes to mobile menu I’d like the sidebar contents to appear above .main-content Currently this code moves the sidebar all the time.
Here’s the code I’m trying to use –

jQuery(document).ready(function($) {
var aside = $(‘aside.x-sidebar’),
main = $(‘.main-content’),

aside.insertBefore(main);

function changePositions() {
windowsize = $(window).width();
if(windowsize < 959px) {
(aside).insertBefore(main);
}
}
}

Thanks in advance for your help.

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[markwest]

This reply has been marked as private.

[Rahul]

Hi There,

Would you mind sending us a screenshot and be more specific about where do you want to place the sidebar.

Thank you for understanding.

[markwest]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for the clarifications. To resolve your issue please do the following:

1] Please edit your custom template both the single-therapist.php and single-therapy.php. You need to edit this line: <div class="x-container max width offset"> and you have to update it use this line instead: <div class="x-container max width offset single-{thera...}">.

2] Your JS code did not do well. You have to remove it and add the following JS code instead in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $(window).on('load resize', function(){
    var windowsize = $(window).width();
    
    if(windowsize > 979) {
      $('.single-therapist .x-sidebar, .single-therapy .x-sidebar').insertAfter('.x-main');
    } else {
      $('.single-therapist .x-sidebar, .single-therapy .x-sidebar').insertBefore('.x-main');
    }
  });
})(jQuery);

We would loved to know if this has work for you. Thank you.

[markwest]

Hi Rue,

A HUGE thank you – that looks perfect.

Can I assume from your code that it was not necessary for me to apply the additional .main-content class to my main page text element? If so I will go through and remove it.

Thank you again for the thorough answer and quick response.

Kind Regards

Mark

[Rue Nel]

Hey Mark,

Yes you do not have to add a custom class to your text element. What the code does is just swap the default order of the x-main and x-sidebar on different screens. The usual order is this:

<div class="x-main">
  // the content
</div>

<div class="x-sidebar">
  // the content
</div>

And when this is displayed on smaller screen, you will get the same order. So what we did is switch the order on smaller screens.

Hope this explain it briefly.

[markwest]

Hi Rue,

I understand what you are saying – but my page title is within x-main – i.e. I am not using the WordPress page title.

I have within .x-main

<custom headline>
<text> element with .main-content class

I want the mobile menu to sit between them – like this –

<custom headline>
<mobile menu>
<text> element with .main-content class

So, I have tweaked your code –

(function($){
$(window).on(‘load resize’, function(){
var windowsize = $(window).width();

if(windowsize > 979) {
$(‘.single-therapist .x-sidebar, .single-therapy .x-sidebar’).insertAfter(‘.x-main’);
} else {
$(‘.single-therapist .x-sidebar, .single-therapy .x-sidebar’).insertBefore(‘.main-content’);
}
});
})(jQuery);

I also had to set the Ubermenu breakpoint to 979px and change my @media CSS to 979px and it now all works great 🙂

Thank you again for your help pointing me in the right direction.

Kind Regards

Mark

[Christopher]

Please let us know if you have further questions.

[Author]

Posts