Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1212066

    Hi,
    I urgently need help with this:

    #1212285

    Hey payton_sil,

    https://share.getcloudapp.com/NQuDpWyL This code is making sidebar this fixed size for all screen sizes. You need to adjust the code for the iPad screens with media queries.

    Best regards,
    Victoria

    #1212326

    Hi Victoria,
    I had received this code from a Kriesi moderator upon my request to make the sidebar sticky when scrolling down. How should I change it so that it remains sticky on the top but adjusts to the screen in terms of width?
    Thanks,
    Silvia

    #1212973

    Hi there,
    could someone please help me with this issue?
    Thx,
    Silvia

    #1212986

    I have installed the Q2W3 plugin as recommended by another moderator. That solves the problem on large screens using Chrome and Firefox; it still doesn’t work on small screens, smartphones, and it doesn’t work on Safari at all.
    How can I create a fixed sidebar widget that works on all browsers and all screen sizes, preferrably without a plugin?

    Thank you in advance!

    #1213893

    Hi,
    Sorry for the late reply and thanks for the link, I understand you are now using the Q2W3 plugin and not the css:

    aside.sidebar.sidebar_right.alpha.units{
        position: fixed!important;
        width: 400px!important;
        right: 100px!important;
        top: 100px!important;
    }

    Correct? The Q2W3 documentation shows how to disable on mobile
    For screens below 767px you will want the fixed widget disabled and for screen sizes 768px to 1024px you will want to use

        top: 100px;
        width: 250px;

    for it to show well. Does the plugin let you set this?

    Best regards,
    Mike

    #1214300

    Hi Mike,
    yes, I am now using Q2W3 but the “fixed” position now only works on desktop with Chrome and Mozilla. It does not stay fixed on tablet and on Safari (either screen size).
    So I would like to go back to setting it in the CSS. Fixing it through CSS worked before on all screens, just setting the sidebar responsive on tablet view didn’t work. What should I add to CSS to have the sidebar the right size on smaller and bigger screens?
    Thanks,
    Silvia

    #1214327

    Hi,
    If you want to go back to the css solution please disable the plugin so we can try again.

    Best regards,
    Mike

    #1214334

    Hi Mike,

    I have disabled the plugin. The CSS code currently is:
    aside.sidebar.sidebar_right.alpha.units {
    right: 20px!important;
    }
    That way it looks good on tablet and desktop and on all browsers; as soon as I add
    position: fixed!important;
    the sidebar is way too big.
    What should I add to the CSS?

    Thanks in advance,
    Silvia

    #1215003

    Hi,
    Thank you, I notice that when the sidebar sticks the contact form button is out of view, so if you add this script it will allow the sidebar to scroll up a little to show the button and then becomes fixed.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_script(){
      ?>
      <script>
    (function ($) { 
      $(window).scroll(function() {
        var width = $(window).width(), height = $(window).height();    
        var scroll = $(window).scrollTop();
        var $sidebar = $( 'aside.sidebar.sidebar_right' );
          if (scroll >= 30 && width >= 1024) {
        $sidebar.addClass( 'sticky' );
       } else {
        $sidebar.removeClass( 'sticky' );
       }
      });
     })(jQuery);
     </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');

    and add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (min-width: 768px) { 
    #main aside.sidebar.sidebar_right.alpha.units.sticky {
    position: fixed !important;
        right: 12% !important;
        top: 10% !important;
    }
    #top #main .sidebar.sticky {
        width: 27% !important; 
    }
    }

    Then clear your browser cache and check.

    Best regards,
    Mike

    #1215011

    Hi Mike,
    works perfectly, thank you so much!!!
    Silvia

    #1215124

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘sidebar crashes site’ is closed to new replies.