Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #26593

    Hi all,

    I see that this has been asked in the past without success, so I’m offering a reward for anyone who can help me get the sidebar to float to the top (above the content) instead of at the bottom. I’m trying to gauge feasibility, so please let reply to this thread and let me know before going to the next step. If this post isn’t appropriate for the forum, I apologize, and will try elsewhere,

    thank you, love the hard work that’s gone into the theme,




    This will require a lot of modifications. Example for the pages, you need to edit page.php or template-builder.php (if you’re using the Advance Layout Editor). Create a page using the default editor, set a Right Sidebar. Edit page.php, find the code that renders the sidebar:

    <?php<br />
    <br />
    //get the sidebar<br />
    $avia_config['currently_viewing'] = 'page';<br />
    get_sidebar();<br />
    <br />

    Place it on top of the loop’s container:

    <div class='template-page content <?php avia_layout_class( 'content' ); ?> units'>

    Add this on your custom.css:

    #top #main .sidebar {<br />
    float: right;<br />
    width: 269px;<br />

    And this one to make sure it is visible on mobile devices

    /*<br />
    Mobile Styles<br />
    ================================================== */<br />
    /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */<br />
    <br />
    @media only screen and (max-width: 767px) {<br />
    /* Add your Mobile Styles here */<br />
    .responsive #top #main .sidebar {display:block; }<br />

    We’re only talking about the Page made using the Default editor. You still have posts, products, portfolios and pages with Advance Layout Editor. And it might require some Media Queries to correct the layout for screen widths.

    Send me an email on //…



    Thank you for all your help and suggestions. I think I am close to having it working, except for the template-builder.php file. This may be my last issue that I need help with, as I’ve tried everything, without success. If anyone can help, it would be greatly appreciated.



    Glad the solution worked. The template-builder is a bit tricky. Please try this:

    Edit template-builder.php, remove everything then paste this code:




    Hi, I am unable to get the template-builder working with your pastebin code…unless I’m missing something obvious. Thank you again for your help.


    Hi Greg,

    If that doesn’t work I would recommend having a freelance developer go through the file to re-organize the sidebar before the content and they will then be able to do any bug fixes or css adjustments that are needed.




    Will the above code modifications move the sidebar to the top ONLY on mobile devices? I don’t want to move it on desktop or tablet sizes, but unless I am missing something, it looks like the code would move it on all screen sizes.


    Hi jh100,

    The above is only a partial solution. It will move the sidebar to be generated before the content and then force it to display on mobile devices.

    It still needs to be adjusted with css to display correctly and each of the page templates needs to have the code position changed.



Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘REWARD: for sidebar top on mobile screens’ is closed to new replies.