Jump to content

Weird Ellipses/Three Dots at Top Right Corner of Mobile Site

Go to solution Solved by leightorres,

Recommended Posts

On the mobile site only (not the desktop version) there are three dots on the top right corner of the site.  I don't know when they appeared but I can't figure out how to get rid of them.

 

www.cakehero.com

Here is the custom code I have for the site:

Quote

.horizontal-navigation-bar nav ul li a { padding: 0 1.2em; }
     .subnav ul li {padding: 0 0 1px 0;
     } /*adds vertical space between dropdown menu items in nav*/
.spacer-block { padding: 0 }

 #mobile-navigation-title {
       background: url("https://images.squarespace-cdn.com/content/57e17c5f20099e1414d6594c/fd572c66-69cf-440c-b53a-891b869b3b41/LOGO_Horizontal-01.jpg?content-type=image%2Fjpeg") no-repeat center;
       text-indent: 100%;
       min-height:60px;
   background-size:contain;
}
 #mobile-navigation #mobile-navigation-label {
       background:transparent;
       color:black;

}

 

Link to comment

Hi @leightorres can you provide a screenshot of what you're seeing please? I can't see the 3 dots that you are describing.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

Spoke to Squarespace, they had me remove my custom css and the dots disappeared.  That being said, the custom css was for my logo to appear as a header on the mobile site, as the five template does not have that option.  So while the dots are gone, so is my logo header. 

Marked as sort of solved by squarespace. 

Link to comment
  • Solution

This is the custom css I had been using, with details edited to fit my site (sizing, etc).  I re-entered it fresh, added my image url, and the dots remained.  

I started playing around with sizing and for some reason setting the font-size at 2em and margin-top at .01em made the dots disappear.  No clue why but I am taking this as a win!  I hope this helps someone else.

 

/*Add logo to display in mobile*/
#mobile-navigation-title a {
  color: transparent;
  background-image: url("YOUR_IMAGE_URL_HERE");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 2.5em;
}
/*Adjust mobile hamburgernav position*/
#mobile-navigation-label {
  margin-top: 1em;
}
Link to comment
Quote

I started playing around with sizing and for some reason setting the font-size at 2em and margin-top at .01em made the dots disappear.  No clue why but I am taking this as a win!

I suspect text-overflow.

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

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.