Jump to content

Fix my mobile store navigation button from being a black square to my shop logo

Go to solution Solved by Ziggy,

Recommended Posts

Hi everyone.

I am looking to fix this bug within my mobile store navigation when selecting the menu in the top right of the screen. My store button, which has custom code to be my logo for the store works fine on the desktop version of my site, but when I switch to the mobile version, the store logo changes to a black button and has moved to the bottom of the screen for some reason (see attached). I think it has something to do with the code I have used to display my custom logo for my store, as I have used quite a bit of code to have it this way. For reference, the store is called "Stints" and the button can be selected on my desktop version of the site.

Password for site is: stewartstints23

Any advice or support would be greatly appreciated, and if anyone can help me out with code for fixing this would be great.

Thanks!

image.thumb.png.7e08b788492032230a08671fb701c255.png

Link to comment

Can you share your website URL?

19 minutes ago, stewartcnr said:

which has custom code

Can you share this code?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Posted (edited)

My site address is: https://marlin-alligator-mw65.squarespace.com/

Please see code below, I had to mess around with it quite a bit with reading other forums and tutorials. It took me a while to get the button the way it is and how it operates, so I hope there is a solution to have a similar function on my mobile version of the site. Cheers!

.header-actions-action--cta {
    background-image: url(https://static1.squarespace.com/static/660bdbdeae504c499ef00e57/t/661fc0069693ad2a335845be/1713356806553/Stints+Logo_Website.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 0em;
}
.header-actions-action--cta  .btn {
  margin-top: -8px;
  background-color: transparent !important;
  border-color: transparent !important;
}
.header-menu-cta .btn:hover,
.header-actions-action--cta:hover {
  opacity: 0.8;
}

Edited by stewartcnr
Added website URL
Link to comment

Add this:

.header-menu-cta a {
    background-image: url(https://static1.squarespace.com/static/660bdbdeae504c499ef00e57/t/661fc0069693ad2a335845be/1713356806553/Stints+Logo_Website.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 0em;
}
.header-menu-cta a {
  background-color: transparent !important;
  border-color: transparent !important;
}
.header-menu-cta a:hover {
  opacity: 0.8;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Posted (edited)

Try without the a

.header-menu-cta {
    background-image: url(https://static1.squarespace.com/static/660bdbdeae504c499ef00e57/t/661fc0069693ad2a335845be/1713356806553/Stints+Logo_Website.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 0em;
}
.header-menu-cta a {
  background-color: transparent !important;
  border-color: transparent !important;
}
.header-menu-cta:hover {
  opacity: 0.8;
}
Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
9 minutes ago, stewartcnr said:

But sadly it is huge and in the bottom corner of the screen.

Try adding a margin and a max-width.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Add this inside .header-menu-cta

    max-width: 120px;
    margin-left: 6vw;

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

No, inside the other one without the a

.header-menu-cta {
  background-image: url(https://static1.squarespace.com/static/660bdbdeae504c499ef00e57/t/661fc0069693ad2a335845be/1713356806553/Stints+Logo_Website.png);
  background-size: contain;
  background-repeat: no-repeat;
  padding: 0em;
  max-width: 120px;
  margin-left: 6vw;
}
.header-menu-cta a {
  background-color: transparent !important;
  border-color: transparent !important;
}
.header-menu-cta:hover {
  opacity: 0.8;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
34 minutes ago, stewartcnr said:

That's it! It looks great. Thanks so much for your help on this. Exactly what I was after, appreciate it.

Happy to help, would you give my posts a like? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.