Ethos move sidebar to top of page responsive site

Support
#1

Hi Guys

I have followed the instructions here carefully, but it is still not happening…

I am using pro-child, so maybe this is the error? As you have said to put it into x-child (its an old support item)

Here is the link to the folder where the new php document is placed…

/public_html/wp-content/themes/pro-child/framework/views/ethos

The site is https://splitshifts.com.au

Your code is:

<?php // ============================================================================= // VIEWS/ETHOS/TEMPLATE-LAYOUT-SIDEBAR-CONTENT.PHP // ----------------------------------------------------------------------------- // Sidebar left, content right page output for Ethos. // ============================================================================= ?> <?php get_header(); ?> 
  <?php get_sidebar(); ?>

  <div class="<?php x_main_content_class(); ?>" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( 'ethos', 'content', 'page' ); ?>
      <?php x_get_view( 'global', '_comments-template' ); ?>
    <?php endwhile; ?>

  </div>

</div>
<?php get_footer(); ?>

Thanks in advance.

Max

#2

Hi Max,

You can do it with CSS instead. Please try this in the Global CSS:

@media (max-width: 980px) {

    .blog .offset.cf {
        display: flex;
        flex-direction: column;
    }

    .x-header-landmark+.x-container>.offset>.x-sidebar {
        margin-top: 10px;
    }

}

Hope this helps.

#3

Hi

You will see the private note above with login credentials…

This css snippet for side bar responsive view at top of page works fine for the main all posts page.

See: https://splitshifts.com.au/

But does not work on any other pages throughout the site “about” “category archive pages” etc.

See: https://splitshifts.com.au/split-shifts-caterers-chefs-venues/

See: https://splitshifts.com.au/hospitality-industry-articles/hospitality-industry-news/

Is it because the class is .blog ? And i need to add an individual class for each page/post category?

Basically, I would love the sidebar to be on top of any responsive screen for every page excluding single post page.

I Hope this makes sense.
Cheers
Max

#4

Hi there,

Yes, it’s because of .blog. Try changing it to this

@media (max-width: 980px) {

    .x-sidebar-content-active .offset.cf {
        display: flex;
        flex-direction: column;
    }

    .x-header-landmark+.x-container>.offset>.x-sidebar {
        margin-top: 10px;
    }

}

Thanks!

#5

Hi Rad

It’s just not working for me.

I have tried everything. I have deactivated all my plugins, I have added the php file to:

pro-child/framework/views/ethos

I have also added the custom css snippet to additional css page in customizer.

Could you do me a real favour and login as admin and see what the heck is wrong with this?

Admin credentials below.

Thanks so much
Max

#6

Hi @gimmechefs,

Ah, it should be column-reverse, please change it to this

@media (max-width: 980px) {

    .x-sidebar-content-active .offset.cf {
        display: flex;
        flex-direction: column-reverse;
    }

    .x-header-landmark+.x-container>.offset>.x-sidebar {
        margin-top: 10px;
    }

}

Hope this helps :slight_smile:

#7

Hi Rad

Thanks so much for that. It worked perfectly.

I really appreciate your effort.

Best
Max

#8

You’re welcome!
Thanks for letting us know that it has worked for you.

#9

2 Quick Follow Up Questions Please… sorry i didn’t ask this before.

— Above you gave me code for sidebar sitting above content, responsive view.

It works perfectly…
I am also looking at making this side bar sticky on desktop view.

I have tried the following threads code and it hasn’t worked.
https://community.theme.co/forums/group/support-center/

So, what i am looking at is sticky sidebar, sidebar on top of content in responsive view.

— How do i add widgets to sidebar on single post page and search results pages? The sidebar appears, but i cant see the option for these pages when configuring side bar in admin.

Thanks so much for your help with this.
Best Regards
Max

#10

Hello There,

Do you want something like this?

You can use this custom JS code:

function sticky_relocate() {
    var window_top = jQuery(window).scrollTop();
    var div_top = jQuery('.x-main').offset().top;
    if (window_top > div_top) {
        jQuery('.x-sidebar').addClass('stick');
    } else {
        jQuery('.x-sidebar').removeClass('stick');
    }
}
(function($) {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
})(jQuery);

And make use of this custom css:

.stick {
    margin-top: 0 !important;
    position: fixed;
    top: 120px;
    left: 6% !important;
    z-index: 10000;
}

Please understand that this is not a perfect fit to your site as you might have a different settings from the site found in the other thread. You have to keep in mind that we are giving you an example for you to start your customization. This solution may or may no longer work in the future or could potentially create issues as well.

The single blog post and the search results page relies on the default main sidebar. If you create a custom sidebar and assign it to the single blog post, you can do that as well. Please check out unlimited sidebar in our knowledge base: https://theme.co/apex/forum/t/features-unlimited-sidebars/95

Hope this helps.

#11

Hi Rue

Thanks for getting back so quickly. Awesome Themeco Support! I will work the customisation requirements myself. Your snippet is working well, but the menu is sticking over the content. Like this:

Cheers
Max

#12

Hello Max,

Simply update the css code and use this instead:

@media(min-width: 980px){
  .stick {
    margin-top: 0 !important;
    position: fixed;
    top: 120px;
    left: 6% !important;
    z-index: 10000;
  }
}

The sidebar will only be sticky when the screen size is greater than or equal to 980 pixels.

Hope this helps.

#13

Works Perfectly RueNel. Thanks very much for that.

#14

Glad that we could be of a help :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.