Jump to content

RichardR

Member
  • Posts

    129
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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
  2. 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.
  3. 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>
  4. Thanks @tuanphan I've sent a support request, not sure how quickly they respond.
  5. 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; }
  6. 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 🙂
  7. Hey @tuanphan I think you’ve suggested a few CSS options for Elfsight before. I’d really value your help please.
  8. 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
  9. Just awesome as always. Thanks so much for all your time and support.
  10. 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>
  11. 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.
  12. 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.
  13. 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.
  14. 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
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.