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

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!

Can you share your website URL?

19 minutes ago, stewartcnr said:

which has custom code

Can you share this code?

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

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

Unfortunately, that didn't seem to work. It seems to have removed the black square, but my store button is not there either. Any thoughts?

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

It has appeared! But sadly it is huge and in the bottom corner of the screen.

Progress for sure here, btut ideally I would like it just below the contact button in line with the menu options.

Thanks very much for your help so far.

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.

Do you have any recommended code for that? Apologies I am not much of a coder... but I try my best.

Add this inside .header-menu-cta

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

Would it be like this? or no? It didn't change anything with the code added in.

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

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!