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

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

You want button appear here or?

did anyone find a solution to this? i have the same problem.

On 1/3/2023 at 11:29 PM, SamKahn said:

did anyone find a solution to this? i have the same problem.

You mean make a button appear here?

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

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

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

 

 

Can you share site url? We can check easier

Hi @tuanphan

https://www.valueresonance.space/

Thanks

@tuanphan

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

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

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

 

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

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

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?

@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 

#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;
}

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

#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;
}

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?

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;
}

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.