Tagged: sidebar
-
AuthorPosts
-
May 12, 2020 at 10:21 am #1212066
Hi,
I urgently need help with this:May 12, 2020 at 6:11 pm #1212285Hey 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,
VictoriaMay 12, 2020 at 6:59 pm #1212326Hi 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,
SilviaMay 14, 2020 at 3:56 pm #1212973Hi there,
could someone please help me with this issue?
Thx,
SilviaMay 14, 2020 at 5:21 pm #1212986I 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!
May 18, 2020 at 12:52 am #1213893Hi,
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 usetop: 100px; width: 250px;
for it to show well. Does the plugin let you set this?
Best regards,
MikeMay 19, 2020 at 11:59 am #1214300Hi 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,
SilviaMay 19, 2020 at 1:07 pm #1214327Hi,
If you want to go back to the css solution please disable the plugin so we can try again.Best regards,
MikeMay 19, 2020 at 1:57 pm #1214334Hi 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,
SilviaMay 21, 2020 at 2:05 pm #1215003Hi,
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,
MikeMay 21, 2020 at 2:48 pm #1215011Hi Mike,
works perfectly, thank you so much!!!
SilviaMay 22, 2020 at 12:48 am #1215124Hi,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘sidebar crashes site’ is closed to new replies.