Custom <head> content only for Desktop - jquery
-
Hey guys,
thanks to that script i found in that forum, it's now possible to change the color of the navbar from transparent to any color by scrolling.
<script> jQuery(document).ready(function(){ jQuery(window).scroll(function() { // check if scroll event happened if (jQuery(document).scrollTop() > 25) { // check if user scrolled more than 50 from top of the browser window jQuery(".navbar").css({"background-color": "rgba(66,70,80,1.0)", "backdrop-filter": "saturate(180%) blur(20px)"}); // if yes, then change the color of class "navbar" to white (#ffffff) } else { jQuery(".navbar").css({"background-color": "transparent", "backdrop-filter": "none"}); // if not, change it back to transparent } }); }); </script>I'm not really into coding, so can anyone of you tell me what i have to add to this script that the jquery only executes for desktop view? atm it also effects the mobile version, resulting into display errors.
Thanks for your help!
-
Dear @DET
https://stackoverflow.com/questions/7715124/do-something-if-screen-width-is-less-than-960-px
The code should only run if Viewport/screen size is above certain Pixel
Hope this helps - Happy 2021 and thank you for using Lay Theme :)
Sincerely
Richard
Need custom programming for your Lay Theme site?
I regularly add new features to Lay Theme for free, based on user feedback. But if you or your client need something more specific, I’m happy to offer custom paid programming tailored to your project.
Email info@laytheme.com with the subject "Custom paid programming for Lay Theme" and a short description of what you need — I’ll reply with a cost estimate.
Custom features I build often make it into future Lay Theme updates, so your idea might benefit the whole community.
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it
