Custom CSS Font - Restaurant Menu

Good morning!

First of all I'd like to apologise if this topic has been discussed before but I couldn't find the right thread. 

I'm currently designing the menu page of a small restaurant chain in Madrid, I designed the physical menu myself and i'm trying to apply the look and feel to the website as much as possible. This is what it currently looks like:

https://turbot-clover-5gh5.squarespace.com/menu

PASS: SQUARESPACETEST

I really like the look and feel I achieved but I feel like it is far too long on the page, so I tried playing with the Menu Block Squarespace provides and looked online how to apply my own fonts and stuff (I'm not linking the site cause it's a trial version as of yet and the block won't display but you can see what it currently looks like on the attached image)

So here goes my big question, is there any way I could use coding for generating the menu block the way I have it on the menu page? I want it to be divided by categories (To Share, Personal Pizza, Fresh Pasta) and for it to include colours, sizes and text alignment of the menu page I shared above. 

Thank you all so much in advance and sorry for the long question!

Actually if you want to do this when users click on these buttons >> Show corresponding content under? I can give the quick guide

hi @tuanphan thanks for replying! That would be much appreciated!

I also have another question: on the header menu, there's a line underneath the section where you are, is there anyway we could make that line or the line and text different colour? basically highlight where the user is

Hi @tuanphan sorry to trouble you, just wanted to double check you read my message?

thanks!

THANK YOU ❤️

@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!

On 5/8/2024 at 11:18 PM, lamdra said:

@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!

Recently I wrote another guide (similar above, but with active button style), you can see this.

Or you can share link to page where you added the code, I will adjust code for your case.

https://forum.squarespace.com/topic/297322-share-click-button-–-show-menu-block-section/

@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.

On 5/10/2024 at 8:01 PM, lamdra said:

@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.

Change this code

<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');
  });
  // 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');   
  });
 // 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');  
  });
    // 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');
  });
   // 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');  
});
});
</script>

to this

<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>
  a.change-button-style {
    background-color: #fff !important;
    color: #5b4d21 !important;
}
</style>

On 5/12/2024 at 1:34 AM, tuanphan said:

Change this code

<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');
  });
  // 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');   
  });
 // 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');  
  });
    // 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');
  });
   // 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');  
});
});
</script>

to this

<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>
  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!

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>

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

9 hours ago, lamdra said:

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

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

On 5/14/2024 at 1:22 AM, lamdra said:

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

change this line

// for asia section, you can change it

to this

// for asia section, you can change it
$('a[href="#main"]').addClass('change-button-style');

On 5/14/2024 at 11:04 AM, lamdra said:

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

You missing a closing </em> tag somewhere, I don't sure where, but you can paste all em code in Menu Block here, I can check easier

Currently Drink Sections is wrap by <em> tag, it causes problem.

8 hours ago, tuanphan said:

change this line

// for asia section, you can change it

to this

// for asia section, you can change it
$('a[href="#main"]').addClass('change-button-style');

 

You missing a closing </em> tag somewhere, I don't sure where, but you can paste all em code in Menu Block here, I can check easier

Currently Drink Sections is wrap by <em> tag, it causes problem.

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.

On 5/18/2024 at 12:21 AM, lamdra said:

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.

Can you take screenshot all Menu Block content?

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.

There is a missing <em> tag somewhere...

Not sure where, but there is a missing <em> tag

Can you add me as a contributor or duplicate the site & add me? I can check edit mode easier

On 5/22/2024 at 1:48 AM, tuanphan said:

There is a missing <em> tag somewhere...

Not sure where, but there is a missing <em> tag

Can you add me as a contributor or duplicate the site & add me? I can check edit mode easier

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

On 5/28/2024 at 10:57 PM, lamdra said:

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

 

I sent your a private message.

Invite sent. Thanks for looking into this.