RichardR

Thanks is much for your reply, they have sneakily changed the url where it's hosted - which they didn't communicate. Panic over and thank you for checking and pointing this out.

Hi everyone, I have 2 pages on the website with e-learning code embedded. Both have been working with no issues for some time, now they don't work on the mobile, just a blank space. Links to two pages below: https://www.probation-institute.org/drug-treatment-training https://www.probation-institute.org/veterans To test, I removed all CSS and that didn't make a difference. I'd be grateful for any advice please. Richard

Thank you so much, just perfect 😃

Hi everyone, I have added an announcement bar and I just can't figure out how to stop it overlapping the menu on the mobile. I'd be grateful for help with 3 things: Making announcement bar disappear when clicking on menu. Reduce text wrapping on mobile, so I can get announcement text all on one line. Make bar height smaller, if text on one line. Website: https://www.probation-institute.org Many thanks, Richard

As always @tuanphan thank you for all your help. I've managed the styling with a little help from Elfsight too. So pleased it finally works! Thank you so much.

Thank you @tuanphan. This sometimes works on mobile, the search appears across the whole of the bottom of the screen then jumps to the top. On desktop, similar in that it appears across the bottom but it then disappears altogether (see screenshots). Tried in multiple browsers. I'm keen to make it look the same as the Squarespace search function too, small and discreet. Full code injection I used below (though I've taken the section in italics out for now) <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script> <div class="elfsight-app-3d11d10a-b7b7-4bc3-a662-b1825ec634bf"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/how-to-join" class="Header-nav-item">JOIN HERE</a></div>').appendTo('nav.Header-nav.Header-nav--secondary'); $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/donate" class="Header-nav-item">DONATE</a></div>').appendTo('.Mobile [data-nc-container="top-center"]'); }); </script> <style> nav.Header-nav.Header-nav--secondary a { white-space: nowrap; } .Mobile [data-nc-container="top-center"] { display: flex !important; } .Mobile [data-nc-container="top-center"] a { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); font-weight: 500 !important; border: 0; background-color: #0a579f; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; border-radius: 30px; padding: 9px 12px; margin: 0.618em 0.618em; } </style> <style> /* Hide join here orange button */ @media screen and (min-width:641px) { div#block-yui_3_17_2_1_1590057489722_4915 { display: none; } } /* hide mobile donate button */ nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary { display: none; } </style> <script> $(document).ready(function(){ setTimeout(function(){ $('div[class*="FloatingButton__Container"]').appendTo('[data-nc-container="top-right"]'); },3000); }); </script> <style> .eaSXfB { position: static !important; margin-left: 20px; } .Header-search { display: none; } </style>

Thanks @tuanphan I've sent a support request, not sure how quickly they respond.

Thank you @tuanphan, I've tried both suggestions and no luck I'm afraid. This is the full CSS if it helps. Current code injection: <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script> <div class="elfsight-app-3d11d10a-b7b7-4bc3-a662-b1825ec634bf"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/how-to-join" class="Header-nav-item">JOIN HERE</a></div>').appendTo('nav.Header-nav.Header-nav--secondary'); $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/donate" class="Header-nav-item">DONATE</a></div>').appendTo('.Mobile [data-nc-container="top-center"]'); }); </script> <style> nav.Header-nav.Header-nav--secondary a { white-space: nowrap; } .Mobile [data-nc-container="top-center"] { display: flex !important; } .Mobile [data-nc-container="top-center"] a { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); font-weight: 500 !important; border: 0; background-color: #0a579f; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; border-radius: 30px; padding: 9px 12px; margin: 0.618em 0.618em; } </style> <style> /* Hide join here orange button */ @media screen and (min-width:641px) { div#block-yui_3_17_2_1_1590057489722_4915 { display: none; } } /* hide mobile donate button */ nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary { display: none; } </style> Button CSS in Elfsight .global-styles, [class^='FloatingButton__Container-sc'] { top: auto !important; bottom: 16px; }

Sure, this is in the footer of the code injection: <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script> <div class="elfsight-app-3d11d10a-b7b7-4bc3-a662-b1825ec634bf"></div> This is the CSS directly attributed to the button in the Elfsight set up: .global-styles, [class^='FloatingButton__Container-sc'] { top: auto !important; bottom: 16px; } Thank you 🙂

Hey @tuanphan I think you’ve suggested a few CSS options for Elfsight before. I’d really value your help please.

Hi everyone, As I've seen all over the forum, the search facility doesn't seem to accurate - as I'm experiencing too here: https://www.probation-institute.org I've been looking at Elfsight as an alternative, which seems to do the trick. I'd really welcome some help positioning and styling it properly and embedding in the header please. At present it is positioned at the bottom right of the page, with CSS they provided, as you'll see on the screenshot. Ideally, I'd like it exactly where the SS search is at the top right in the header and styled the same if possible. I don't want it to stand out too much and just blend into the header. The other issue is making sure it looks ok on the mobile version, so again trying to replicate what is there on the current mobile version with just the icon please - see attached. Any ideas I'd be very grateful. Thanks, Richard

Just awesome as always. Thanks so much for all your time and support.

Thanks @tuanphan I've played around with styling a little, see below. I'd really welcome a little more help please. Mobile site: the donate button from the side menu needs hiding for mobile. Desktop: the 'Join Here' button in orange in the middle needs removing (desktop only). Many thanks <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/how-to-join" class="Header-nav-item">JOIN HERE</a></div>').appendTo('nav.Header-nav.Header-nav--secondary'); $('<div class="Header-nav-inner"><a href="https://www.probation-institute.org/donate" class="Header-nav-item">DONATE</a></div>').appendTo('.Mobile [data-nc-container="top-center"]'); }); </script> <style> nav.Header-nav.Header-nav--secondary a { white-space: nowrap; } .Mobile [data-nc-container="top-center"] { display: flex !important; } .Mobile [data-nc-container="top-center"] a { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); font-weight: 500 !important; border: 0; background-color: #0a579f; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; border-radius: 30px; padding: 9px 12px; margin: 0.618em 0.618em; } </style>

Many thanks, I really appreciate it. I've added that as you can see below. Few queries please: - can the two buttons be the same size, colour, font etc on desktop? - reduce the size of the button on the mobile version in the header - remove the button in the menu on the mobile (orange donate) - be great to just have the donate button on the mobile header, not the 'how to join' - centre the menu on the desktop so the space either side is the same? (between the logo and the buttons) Or, would it be better to remove the orange donate button altogether and add 2 buttons using the script instead? But only have one appear on the mobile version? Many thanks for all your help.

Something to look like this please @tuanphan. Not sure on whether to have the buttons side by side or above and below on the header.