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.

Yes to both please. I also wondered whether I can have two buttons in the secondary nav? A donate button and how to join button? Only the donate one in the header on the mobile though.

Hi, I have a button in the secondary nav in the header on the desktop. Is there a way of enabling it to appear in the header rather than in the side menu on the mobile please? On the desktop, is there a way of centring the menu between the logo and the donate button too? https://www.probation-institute.org Thank you

Thank you so much!!! Really looks a lot better. I'll play around a little more but it's given me everything I need it looks good on the mobile in portrait but a little odd in landscape. Would I need any specific code to rectify that? Also, would you advise making it full width like the banner? Many thanks again.

This one please https://www.probation-institute.org/donate-copy The other is using the normal banner which seems too difficult to do, unless of course you think otherwise. Very happy to take your advice 👍🏻

I’d really appreciate it if you’ve any thoughts on this @tuanphan Many thanks.

I'd be grateful for any advice on the following please: how to change font, font size, font weight without it affecting the rest of the site make the image wider so I can have approx. 50% image and 50% text in the card on the desktop make the image card full screen width on desktop reduce the padding above the image card, just on this page, to bring it closer to the menu centre the text vertically and reduce the white section Many thanks, Richard

So sorry, I've changed to the card option now, which I thought I'd done. I'm just not liking the look of it. Many thanks.

I think if I could get the text box and image the same width and height that would great.

I tried this: https://www.probation-institute.org/donate-copy Need to figure out how to do full width for image on mobile.

Many thanks. I have wondered that, as I’m sure it will give me more flexibility. Will have a play around 😃