Header Issues on Mobile with Five Template

I have a few issues with the header on mobile for my website.  I use the five template.

1. There are three dots at the top right corner at the top of my mobile site that I can't figure out how to get rid of.  It just appeared recently, I had made no recent changes to my site.

2. The logo in the header is blurry.  It wasn't when I first made my site but has changed over time.  I have tried to upload different sizes, custom code, etc and nothing has worked.

I have attached a screenshot.

Thank you!

Can you share your website URL?

www.cakehero.com

I can't see the 3 dots when I view your website.

Are you using a mobile specific logo in the settings? Are you adjusting the header logo in Custom CSS?

The three dots are on the mobile site only.  When I view the mobile site on my squarespace editor they are not there, but they are there in the browser.

Where would I upload a mobile specific logo?  I can't find that.  

This is the css I have for the header:

.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://static1.squarespace.com/static/57e17c5f20099e1414d6594c/t/5a6637469140b7e9aa17edcc/1516648262295/LOGO_Horizontal-Narrower-WEB.png") no-repeat center;
       text-indent: 100%;
       min-height:60px;
   background-size:contain;
}
 #mobile-navigation #mobile-navigation-label {
       background:transparent;
       color:black;
 }

@font-face {
    font-family: tuanphan;
    src: url(upload font & paste font url here);
}
.menu-section * {
    font-family: tuanphan !important;
}

Wow thank you!  The mobile image is now crisp and clear, I so appreciate it.

The three dots are still there on the mobile site, it's confusing.  I deleted the dummy code but the dots remain. This is the css now:

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

Can you mark my post as the solution and give it a like?

Try this addition for the ellipsis:

@media only screen and (max-width: 640px) {
  .banner-content-page-title-description #mobile-navigation-title, .banner-content-empty #mobile-navigation-title {
    text-overflow: clip;
  }
}

Marked as solved for the blurry header, but sadly even with the custom code the three dots are still there.  

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

@media only screen and (max-width: 640px) {
  .banner-content-page-title-description #mobile-navigation-title, .banner-content-empty #mobile-navigation-title {
    text-overflow: clip;
  }
}
}

To remove 3 dots, try this code to TOP of Custom CSS box

span#mobile-navigation-label {
    display: none !important;
}