elizamills Posted August 9, 2023 Share Posted August 9, 2023 Hello! I'm wondering if there is a way to make my mobile logo a clickable telephone (calls a number when selected) and also change the background colour just on mobile. I want my Desktop nav to stay the same just make these changes on mobile version. Thanks Link to comment
tuanphan Posted August 11, 2023 Share Posted August 11, 2023 Hi, You mean Click Mobile Logo >> Open call app? This is possible, if you share site url + Provide phone number, we can give some lines of code to achieve this Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
elizamills Posted August 13, 2023 Author Share Posted August 13, 2023 Yes, when the mobile logo is clicked the call app opens so someone can make a direct call! https://spinach-iris-xcbk.squarespace.com/ Phone number is +61401577672 Thank you so much! Link to comment
Lesum Posted August 14, 2023 Share Posted August 14, 2023 @elizamills Here's a code snippet that will link mobile logo to phone number. Add this code to Settings > Developer Tools > Code Injection > Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { checkScreenSize(); function checkScreenSize(){ var newWindowWidth = $(window).width(); if (newWindowWidth < 481) { $('.header-title-logo a').attr('href', 'tel:61401577672'); } } }); </script> If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Lesum Posted August 14, 2023 Share Posted August 14, 2023 (edited) @elizamills What background color you would like to use on mobile? Is the background color going to be changed on header? Edited August 14, 2023 by Lesum If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
elizamills Posted August 15, 2023 Author Share Posted August 15, 2023 Thank you @Lesum but that code doesn't seem to work? I've added it to the header however it keeps sending me back to the home page. Link to comment
Lesum Posted August 15, 2023 Share Posted August 15, 2023 @elizamills It didn't work because you changed your header on mobile version since the time I wrote the code. When I wrote the code your mobile header was different (only a logo and menu bar). If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
elizamills Posted August 15, 2023 Author Share Posted August 15, 2023 @Lesum I've only updated the logo image so I'm not sure what else changed 😭 Is there a way to edit the code with the current mobile header? Sorry! Link to comment
elizamills Posted August 17, 2023 Author Share Posted August 17, 2023 @tuanphan Hi, is there any code that can help with this? The above hasn't worked! Thanks! Link to comment
Lesum Posted August 18, 2023 Share Posted August 18, 2023 @elizamills I'm seeing a phone number on top of the logo on mobile. Phone number was added with custom code. When I wrote the code, the phone number was not there. Do you still want to add a clickable telephone on the logo? If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
elizamills Posted August 20, 2023 Author Share Posted August 20, 2023 @Lesum I have square kicker activated, I wonder if that's what is causing an issue? The phone number displayed on the mobile version is a logo I created and uploaded! So hoping when someone clicks that logo it calls that number! Thank you so much for helping. Lesum 1 Link to comment
Lesum Posted August 20, 2023 Share Posted August 20, 2023 @elizamills Thanks for explaining the changes you made. Square kicker isn't causing any issue. I'll have to modify the code I written previously to make it work. I'll share the code with you shortly. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
elizamills Posted August 20, 2023 Author Share Posted August 20, 2023 @Lesum Thank you thank you! Lesum 1 Link to comment
Solution Lesum Posted August 20, 2023 Solution Share Posted August 20, 2023 Here's the updated code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { checkScreenSize(); function checkScreenSize(){ var newWindowWidth = $(window).width(); if (newWindowWidth < 481) { $('.header-mobile-logo a').attr('href', 'tel:0401577672'); } } }); </script> Let me know if it works. Thanks! If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
elizamills Posted August 21, 2023 Author Share Posted August 21, 2023 @Lesum Thank you so much for all your help! that worked. Lesum 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment