Jump to content

Button disappeared into the three-line menu on mobile view but is visible in the banner on desktops

Recommended Posts

Posted (edited)

Site URL: https://www.suzannewright.com.au

Hi, 

I have a call-to-action button (Call me, Baby) at the top right of my header. It was appearing on both desktop view and mobile until tonight. I changed the button's settings to link to a contact page. Once I saved it, it disappeared on the mobile view. Now it appears when you click the three lines - it's below the page options. How do I get it out of there, please? I keep choosing the original settings to arrange the header but it doesn't work.

Please help.

Thanks in advance.

Suzanne

Screenshot 2022-08-19 at 9.40.08 pm.png

Screenshot 2022-08-19 at 9.40.17 pm.png

Edited by Suz77
  • Suz77 changed the title to Button disappeared into the three-line menu on mobile view but is visible in the banner on desktops
  • 4 months later...
Posted

the problem was that the button wasnt visible in the mobile version. But i found somebody who asked the same question and the problem was solved through a line of code that i added into the design section

  • 7 months later...
Posted
14 hours ago, ValueResonance said:

Hi @SamKahn

 

Could you post a link to the solution here?

I am struggling with the same thing and cannot find the post you are referring to.

 

Thanks

 

image.thumb.png.fe4353707291f03fad60e726f78ddd18.png

image.thumb.png.8a13a92e32fd3529f7a6f88e4838b890.png 

image.thumb.png.1d9fe28110f7cc8b58f0c6388bb31c78.png

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
17 hours ago, tuanphan said:

Can you share site url? We can check easier

Hey all,How did this happen? is there some code we use or am i missing an easier option?

 

Kindest regards

Posted
13 hours ago, ValueResonance said:

@tuanphan

 

This is what I am trying to do.  For some reason, when I added the icon, the contact button disappeared in the menu

 

image.thumb.png.97aab702340e1c0b5136be6f2b062af8.png

You can add this to Website > Website Tools > Custom CSS

.site-wrapper .header-menu .header-menu-cta a {
    background-color: var(--primaryButtonBackgroundColor) !important;
}

With icon, which code did you use to add icon? We can check it easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

@tuanphan

/* LinkeIn icon color in banner */ 

body.homepage header#header a.icon {
    background-color: rgba(42,103,178,1) !important;
}

This is the code that Used to change the icon colour.  I just used the standard options to add the icon.

 

As usual, your suggestion worked!  

Thanks!

 

 

Posted
14 hours ago, ValueResonance said:

@tuanphan

/* LinkeIn icon color in banner */ 

body.homepage header#header a.icon {
    background-color: rgba(42,103,178,1) !important;
}

This is the code that Used to change the icon colour.  I just used the standard options to add the icon.

 

As usual, your suggestion worked!  

Thanks!

 

 

So did you solve problem or still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

@tuanphan 

Progress but not solved.  There are two problems.

1).  The contact button appears now but ONLY if you `click´ it from the home page. From anywhere else it does not appear.

2). The entire menu is longer than the screen on some phones, and so both the `LI´ icon AND the contact button need to move up. Perhaps the menu items themselves need to move up too.  Perhaps there is some default padding I can remove.  It would be good if the solution contained some numbers that I can adjust to get the spacing right, but I guess that depend more on Squarespace than on you!

 

Thanks 

 

image.thumb.png.c92c0a520c8ed1179b59926fd089a5c9.pngimage.thumb.png.33821c44ab8713049a2ea617f4b672a0.png

 

Posted

#1. Header Style will inherit First Section Style. You set link color in other page is white, so it is invisible

Use this to Custom CSS 

/* header mobile linkedin icon */
body.header--menu-open header#header div.header-menu-actions-action--social a {
    background-color: var(--menuOverlayNavigationLinkColor) !important;
}

#2. Use this CSS to move icon + button up

.header-menu-actions, .header-menu-cta {
    position: relative;
    top: -100px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

mmm.

The 2nd part worked and now I can see the menu on all devices.  I adjusted the 100px down and now it fits.

Also, I now have the LI social icon on all menus , desktop and mobile.

However, it appears in different colours.

1. Desktop: Home page (LI blue) Correct!

 

/* LinkeIn icon color in banner */ 

body.homepage header#header a.icon {
    background-color: rgba(42,103,178,1) !important;
}

2). Desktop: Other pages Pink as secondary button colour from `style 1´

Can I change the word `homepage´ in the code above to `all pages´ or some alternative to make this happen across all pages?

3).  In Mobile the LI social icon appears in dark blue.  I need to also change all these to the LI social blue to be consistent with the desktop.

 

See images attached. Sorry for my horrible writing with a mouse! Hopefully its clear.

 

Thanks

image.thumb.png.2ab25d1333b68490f7eed7c83b58d989.png

 

image.thumb.png.4a539759e7e521443227a181da5c4a2a.png

image.thumb.png.b99321f35268cbba4a70c33aab70303e.png

 

 

 

 

Posted

#2. Just remove .homepage

#3. Change #1 code to this

/* header mobile linkedin icon */
body.header--menu-open header#header div.header-menu-actions-action--social a {
    background-color: var(--primaryButtonBackgroundColor) !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 8/25/2023 at 3:28 PM, tuanphan said:

#2. Just remove .homepage

#3. Change #1 code to this

/* header mobile linkedin icon */
body.header--menu-open header#header div.header-menu-actions-action--social a {
    background-color: var(--primaryButtonBackgroundColor) !important;
}

 

@tuanphan#..

2#   Yes!! worked.  Now desktop LI icon is in the correct blue

 

3#   No.  Did not work.  I replaced the code in #1 as you say and it changes the desktop icon back to pink (The Primary Button color in that style).  The mobile menu stayed the same.

In your code you have written `PrimaryButtonBackgroundColor´.  It seems like a mistake becuase it is clear that this would not be the right colour.  Maybe I am not clear?

You can see in #1. The blue color is a special colour just for this icon:

/* LinkeIn icon color in banner */ 

body header#header a.icon {
    background-color: rgba(42,103,178,1) !important;
}

-----------------------------------------------------------------------------

See attached image.  This blue has to become rgba(42,103,178,1)...same as desktop header.

Am I explaining ok?

 image.thumb.png.2ab25d1333b68490f7eed7c83b58d989.png

 

 

 

 

 

Posted
9 hours ago, tuanphan said:

If you want to change it to blue, same as desktop, use this new code

/* header mobile linkedin icon */
body.header--menu-open header#header div.header-menu-actions-action--social a {
    background-color: #2a67b2 !important;
}

 

YES!!!

 

Thanks again.

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.