Jump to content

How to add two buttons only to the mobile menu

Recommended Posts

Hello, everyone.

I'm trying to add two buttons only to the mobile menu. So far, I've tried all the codes I could find in other discussions but haven't been succesful. I've also tried inserting a text block with code but got stuck on the link part, so at the end I didn't even tried to add the second button. 

Currently I'm using the only button available from the header options (will hide it from the desktop site later), but I'm still in need of the second one.

 

This is the site's url (I hope):  https://octahedron-pepper-rbe4.squarespace.com/

The password is: 12345

 

Thanks. 🙂

Link to comment
19 hours ago, Gonz said:

Hello, everyone.

I'm trying to add two buttons only to the mobile menu. So far, I've tried all the codes I could find in other discussions but haven't been succesful. I've also tried inserting a text block with code but got stuck on the link part, so at the end I didn't even tried to add the second button. 

Currently I'm using the only button available from the header options (will hide it from the desktop site later), but I'm still in need of the second one.

 

This is the site's url (I hope):  https://octahedron-pepper-rbe4.squarespace.com/

The password is: 12345

 

Thanks. 🙂

Do you mean adding 2 button on the header, next to the hamburger?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

Hi! I'd like to just add them to the mobile menu when it's open, not to the header itself. When it's closed I just want the hamburger to be visible. I even hid the header logo from the mobile view in order to add another one at the bottom of the menu itself.

This is what I'm trying to achieve:

image.thumb.png.46856977a4c671ecb8d037799e6a1e13.png

 

So far, this is what I've got (using the button available from the header menu):

image.thumb.png.d5f9a774e74be386e1b1f5529dc2f321.png

 

Maybe there is a way to duplicate the button and be able to change the text and link? Or it might be easier to insert both buttons through code. 

 

Thank you. 🙂

Link to comment

Please see the following.

Add the following to Website > Pages > Website Tools > Custom CSS.

.header-actions .header-actions-action--cta {

  display : none;
  
  }

This is for v7.1.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
22 hours ago, creedon said:

Let us know how it goes.

Hello, Creedon. It worked! I'm amazed! It took me quite a while to understand the procedure, but I finally did it.  Thank you!

Now I need to syle the menu a little. Could you also help me with that? I need to change the elements order and the buttons size and gap between them.

 

This is how the menu currently looks like (the cut part is because of the trail period banner at the bottom):

image.thumb.png.efe6821ec8eba5ecbc0197d6ed1be17b.png

If I try to move the social icons up and the logo down it ends up like this as if the buttons were attached to the social links:

image.thumb.png.d06107507436f80837580e1a81e1a69e.png

Outside the edit view, the logo gets smaller as the screen gets shorter until it disappears. Is there a way to lock it?

 

This is all the code I'm currently using for the whole mobile menu (the last part, starting with "botones extra" is for the second button you just helped me add):
 

/* // MENÚ MÓVIL // */

/* Subrayado de navegación */
.header--menu-open :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content {
  color: #D7A3FF !important;
  background-image: none !important;}

/* Quitar logo header*/
@media screen and (max-width: 641px){.header-title a {
display: none !important;
}}

/* Imagen de Fondo */
.header-menu .header-menu-bg{
  background-image: url(https://static1.squarespace.com/static/66355e9431bd626b9099b9e1/t/663e6f22d26f5249175db0cc/1715367714273/Fondo+Men%C3%BA.png);
  background-size: cover;}

/* Separación de navegacion */
.site-wrapper .header-menu .header-menu-nav a:not(.btn) {
  height: 20vw !important;
  font-size: 30px;}

/* Agregar logo */
[data-folder="root"]:before {
  content: "";
  background-image: url(https://static1.squarespace.com/static/66355e9431bd626b9099b9e1/t/663e7c3b7e741468c18cc5cb/1715371067108/Mesa+de+trabajo+%E2%80%93+1.png);
  display: block;
  width: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto;
  order: 2;}

/* Iconos redes sociales */
.header-menu-actions .icon--lg {
  width: 30px;}

/* Orden redes sociales */
.header-menu-nav-folder-content {
  order: 1;} 

/* Botones extra */
// space between buttons
@gap : 0.5rem; 

.direction-order (row, normal);

         // NO TOCAR!!! //
#siteWrapper .header .header-actions-action--cta .sqs-button-element--primary {
  align-self : center;}
    
.header .header-actions-action--cta, // desktop
  .header-menu-cta // mobile
  {
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -webkit-box-orient : @d3;
    -webkit-box-direction : @d2;
    -ms-flex-direction : @d1;
    flex-direction : @d1;
    grid-gap : @gap;
    gap : @gap;}
      
// desktop
.header .header-actions-action--cta {
  text-align : center;}
      
@media only screen and ( pointer : coarse ) and ( max-width : 1024px ),
  screen and ( max-width : 799px ) {
  .header .header-actions-action--cta {
  display : none;}}
    
// begin mobile
.header-menu-cta {
  justify-content : center;}
      
@media screen and ( max-width : 575px ) {
  .header-menu-cta {
    -webkit-box-orient : @d6;
    -webkit-box-direction : @d5;
    -ms-flex-direction : @d4;
    flex-direction : @d4;}}
      
.header-menu-cta a {
  margin-left : auto;
  margin-right : auto;}
    
// begin direction mixins
  
// desktop
// direction row, normal
.direction-order ( @d, @o ) when ( @d = row ) and ( @o = normal ) {
  @d1 : row;
  @d2 : normal;
  @d3 : horizontal;}
        
// direction row, reverse
.direction-order ( @d, @o ) when ( @d = row ) and ( @o = reverse ) {
  @d1 : row-reverse;
  @d2 : reverse;
  @d3 : horizontal;}
        
// direction column, normal
.direction-order ( @d, @o ) when ( @d = column ) and ( @o = normal ) {
  @d1 : column;
  @d2 : normal;
  @d3 : vertical;}
        
// direction column, reverse
.direction-order ( @d, @o ) when ( @d = column ) and ( @o = reverse ) {       @d1 : column-reverse;
  @d2 : reverse;
  @d3 : vertical;}
      
// mobile
// direction column, normal
.direction-order ( @d, @o ) when ( @o = normal ) {
  @d4 : column;
  @d5 : normal;
  @d6 : vertical;}
        
// direction column, reverse
.direction-order ( @d, @o ) when ( @o = reverse ) {
  @d4 : column-reverse;
  @d5 : reverse;
  @d6 : vertical;}
      // NO TOCAR!!! //

/* Quitar botones header desktop */
.header-actions .header-actions-action--cta {

 

Thanks! 🙂

Link to comment

Found out why it disappeared. The 'margin' properties of the menu image had a value of '0 auto'. Must have been an accidental key press.

However! Had a second problem where the logo was now visible from the Squarespace site building page but it wasn't visible when viewing the site externally. When removing the buttons the logo reappears.
So, basically, the menu is too cluttered and Squarespace eliminates the logo to free space.

All in all, the code for adding a second button works perfectly, Creedon, thank you. I'm going to have to adjust my menu design in order to fit all the items I need.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.