lamdra

Invite sent. Thanks for looking into this.

Hi, thank you! I've duplicated the site and will add you. But what email do I use for you to do that?

Sure, this is all the content in that section. I'll include content from the main food section as well since that one is using some HTML to change pricing color and add formatting. Let me know if you see anything here.

following up on this. What would be the CSS to do this. On all h2 tags? I don't want to go through every block and use the .textshape code if I don't have to. What do you think?

Thanks @tuanphan the button change worked perfectly. But I'm not sure how to get you the em codes from the menu block? Where do I find the em codes? What exactly do you need to see? Thanks for your help.

One last thing. I got this laid out as planned and it looked good. But then all of a sudden there's a random space on this "drinks" section that I cannot remove. I have built and rebuilt this page 4 times. That space does not exist until I enter the code. Any chance there's something we can tweak to make that space consistent on all those sections? A similar issue exists on the very bottom section. And I can't even delete or move that section now. Let me know what you think we can do here

@tuanphan is possible to have the first button "main" be active on page load? So that the first shown section is active? Thanks again

I believe I was able to fix this. Just needed the hide/show back in the style prompt. Code looks like this now. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { // do not remove this code $('section.page-section').each(function(){ var layclass = $(this).find('.code-block .cbsc').attr('class'); console.log(layclass); $(this).addClass(layclass); }); // for asia section, you can change it $('a[href="#main"]').click(function(){ $('.main-section').addClass('show-section').removeClass('hide-section'); $('section.cbsc:not(.main-section)').removeClass('show-section').addClass('hide-section'); $(this).addClass('change-button-style'); $('a:not([href="#main"])').removeClass('change-button-style'); }); // for eu section, you can change it $('a[href="#brunch"]').click(function(){ $('.brunch-section').addClass('show-section').removeClass('hide-section'); $('section.cbsc:not(.brunch-section)').removeClass('show-section').addClass('hide-section'); $(this).addClass('change-button-style'); $('a:not([href="#brunch"])').removeClass('change-button-style'); }); // for us section, you can change it $('a[href="#dessert"]').click(function(){ $('.dessert-section').addClass('show-section').removeClass('hide-section'); $('section.cbsc:not(.dessert-section)').removeClass('show-section').addClass('hide-section'); $(this).addClass('change-button-style'); $('a:not([href="#dessert"])').removeClass('change-button-style'); }); // for africa section, you can change it $('a[href="#drinks"]').click(function(){ $('.drinks-section').addClass('show-section').removeClass('hide-section'); $('section.cbsc:not(.drinks-section)').removeClass('show-section').addClass('hide-section'); $(this).addClass('change-button-style'); $('a:not([href="#drinks"])').removeClass('change-button-style'); }); // for australia section, you can change it $('a[href="#australia"]').click(function(){ $('.australia-section').addClass('show-section').removeClass('hide-section'); $('section.cbsc:not(.australia-section)').removeClass('show-section').addClass('hide-section'); $(this).addClass('change-button-style'); $('a:not([href="#australia"])').removeClass('change-button-style'); }); }); </script> <style> section.page-section.hide-section { display: none !important; } section.page-section.show-section { display: block !important; } a.change-button-style { background-color: #fff !important; color: #5b4d21 !important; } </style>

Hi @tuanphan this worked for the active state but somehow broke the hiding function. All the sections are visible at the same time. Can you take another look? Thanks!

@tuanphan awesome, thank you so much. The page I'm testing this on is here: https://www.jaguarbolera.com/menus I like the idea of using sections instead of menu blocks to have more control over the layouts. But the active state would be helpful feature.

@tuanphan using this tutorial to create a more interesting food menu and it works great. Thanks for this! But wondering if there's a way to keep an active state on the buttons when they're in that section? Thanks!

I'm using a custom font on my site and when I use the highlight feature, the highlight appears dropped a few pixels. Is there a way to align it with the text so they are centered vertically? Move the text up/down or move the highlight up/down? I tried a position shift on the h tag but the highlight moves with it. I'm not sure if it's because of the custom font or not but maybe there's a work around to get it to line up again? thanks for any suggestions. https://www.jaguarbolera.com https://www.jaguarbolera.com/about

The only other code what is in the site header currently which is this: <link rel="stylesheet" href="https://static-assets.clock-software.com/wbe_v2/clock-pms-wbe-integration.css"> <link rel="stylesheet" href="https://static-assets.clock-software.com/wbe_v2/clock-pms-wbe-reminder.css"> <script defer src="https://static-assets.clock-software.com/wbe_v2/clock-pms-wbe-integration.js"></script> <script> document.addEventListener("DOMContentLoaded", (event) => { window.clockPmsWbeInit({ wbeBaseUrl: "https://sky-us1.clock-software.com/spa/pms-wbe/#/hotel/14492", defaultMode: "standard", roundedCorners: true, language: null, }); document.querySelectorAll("[data-clock-pms-wbe-form]").forEach((form) => { form.addEventListener("submit", (e) => { e.preventDefault(); const formData = new FormData(e.target); window.clockPmsWbeShow({ arrival: formData.get("arrival"), departure: formData.get("departure"), // adults: ..., // Optional. Default value if omitted: 2. Expects an integer or null. // children: ..., // Optional. Default value if omitted: 0. Expects an integer or null. // childrenAges: ..., // Optional. Default value if omitted: []. Expects an array of integers. Example: [5, 8] bonusCode: formData.get("bonusCode"), companyCode: formData.get("companyCode"), blockCode: formData.get("blockCode"), roomTypeIds: [], rateIds: [], submit: true, }); }); }); }); </script> Then the code block is for the buttons only: <button type = "button" data-clock-pms-wbe-button> BOOK NOW </button> Do I need to add more code into the header button?

Got it. Duplicate site is setup with the code you gave inserted into header. https://bluebird-dragonfly-f23h.squarespace.com/ password: french You'll see that the BOOK NOW buttons throughout the site are able to call the booking integration. But the one we just put in the header does not. Thanks again.

Hi @tuanphan the code worked to replace the header button, however the button doesn't do anything currently. I can't leave it up there since I need the button to work and the site is live. Is there a different approach? It also leaves a border around the burger nav on mobile. See below. Lastly, the custom font is not displaying in Safari. Is there a reason for that? See below for "book now" button font. Thanks again.

Awesome @tuanphan, this is working but still hoping to tweak it a little bit. I'm setting the font to the same settings but it appears heavier than the site setting. this is my font styling in the code vs squarespace font-family: rigid square; font-size: .75rem; font-weight: 700 !important; letter-spacing: .15em !important; padding: 12px 20px !important; } I'd also like to know a couple more things... - How can I center the button in the code block? - Is it possible to use this code in the header button so that the checkout opens within the site like this button does? Thanks for all your help as always!

@tuanphan were you able to take a look? Appreciate the help. Thanks.

of course, thought I had, but here it is. https://www.thefrenchmenhotel.com

Hi all, tyring to make a code block button that pulls content from code injection in the header to look like the rest of my standard buttons. But I'm unable (unaware of how) to style that code to change the look of this button. This is integrating code from Clock PMS for hotel management software. The button works. Just can't target it to style. Would appreciate any and all help here. THANKS. See below: the "book now" button is the default. The "view all rooms" button is the goal. Buttons are just above the footer currently.

I recently launched this 7.1 site to replace the older 7.0 site. Everything was working fine until I connected the domain. Once the site went live the color behind the header disappeared (along with the button in the header) and the footer is missing. I can see the footer when I edit. If I edit the header I can toggle to another setting and then go back to solid. The header looks right and when I save it disappears again. Viewing the site in safe mode also doesn't solve it. I pulled out all Custom CSS code and hit save. No change so I put it back. I pulled out all header code injection (it's all Tock integration related) and hit save, also no change so I put it back. If anyone can help with this I'd greatly appreciate it. URL: feedery.com screen cap below of the white header (incorrect) and the color header (correct before I hit save)

That took care of both issues. Thanks so much!

Another issue I'm running into is that if I add this tock widget code to a section in the middle of the page the popup calendar is hidden by the section that comes after. Is there a way to fix this? https://foodery.squarespace.com/menus

That worked perfectly, thanks! On mobile, though I see a white border to the "book now" button. Is there a way to remove that?

@tuanphan I'm using this same CSS on my site build but doesn't seem to be working. Can you take a look? https://foodery.squarespace.com password: foodery /* Book now button */ .TockInlineButton>div { background-color: #C49A6C !important; } div#Tock_widget_container>div.TockWidgetWrapper .TockInlineButton span { color: #fff !important; text-transform: uppercase; font-weight: 600; } I'll attach what I'd like it to look like. Thanks!

That did it. Thanks for all the help!