creedon

Please post the URL of your site. If you've not already done so, please set up a site-wide password. Post the password here and then we can take a look at your issue.

I don't have a fix at this time but an observation. When I narrowed the width of my browser window down to mobile proportions I did "see" off screen categories. However my browser also provided a scroll bar so that I could get to the off screen items. I'm on macOS using Chrome. Also same behaviour on Safari.

Please give us the URL for your site so we can take a look at your issue. If you've not already done so please set up a site-wide password. Post the password here and then we can take a look at your issue.

Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION for the page. <style> body:not(.button-style-default).button-style-outline .sqs-editable-button { background-color: #e37262; -webkit-box-shadow: 0 2px 0 0 #dd5340; box-shadow: 0 2px 0 0 #dd5340; color: #fff; font-size: 15px; font-weight: 600; } body:not(.button-style-default).button-style-outline .sqs-editable-button:hover { background-color: #e67e70; } </style> This is for a v7.0 site using the Brine template. If you're not on the business plan or above then add it to Design > Custom CSS, sans the style tag. Let us know how it goes.

Test mode is for Stripe only < https://support.squarespace.com/hc/en-us/articles/205811368-Running-test-orders#toc-option-2---use-test-mode--stripe-only- >. For PayPal you need to do a real transaction then refund yourself or cancel the order < https://support.squarespace.com/hc/en-us/articles/205811368-Running-test-orders#toc-option-1---place-an-order-and-refund-yourself >.

As a starting point add the following to your CSS. .header-menu.header-menu--folder-list { width: 85%; } .header-menu-nav-folder { overflow-y: hidden; } .header-menu-nav-folder:not( .header-menu-nav-folder--active ) { -webkit-transform: translatex( 75% ); -ms-transform: translatex( 75% ); transform: translatex( 75% ); visibility: hidden; } @media screen and (max-width: 767px ) { .header-menu.header-menu--folder-list { width: 75%; } .header-menu-nav-folder:not( .header-menu-nav-folder--active ) { -webkit-transform: translatex( 65% ); -ms-transform: translatex( 65% ); transform: translatex( 65% ); visibility: hidden; } } This is for a 7.1 site. Let us know how it goes.

I'm unable to detect the issue you are seeing. I tried on my iPhone 5 with iOS v10.x. Please tell us more about your Apple device? What is it? iPhone? iPad? What model? What iOS version? What browser are you using? Which version?

Here is a crack at the fonts. Add the following to Design > Custom CSS. .header-menu .user-accounts-text-link { font-size: 16px; } .header-menu-nav-folder-content { justify-content: unset; } .header-menu-nav-item a { font-size: 14px; font-weight: 600; padding: 6px; } You can play with the numbers. Let us know how it goes.

Ah. Can you give us a search phrase we can use to test on your site to see the issue you are seeing?

If I understand what you want correctly, you want the font size to be much smaller on the mobile menu? On the spacing. You want there to be space at the right so that the menu does not cover up the page below? If I have that right, doing that might be difficult. The issue is that on the right side of your site there is a border of white. So making the mobile not take up the whole screen would just reveal white for the most part. Lets work on one issue at a time. Font size first!

Ah. This could be an issue with being in edit mode. If you get out of edit mode does the problem with the buttons not stacking go away? After figuring the stacking problem out, we can move on to mobile implementation.

Well. Interesting. When I did the code the buttons were vertically stacked. We won't be able to do anything unless you set up a site-wide password again and give me the password.

I've updated my previous post with an updated version of the CSS adding rules for mobile.

I think we should try another method. When I came up with the CSS I was working with your home page so I didn't take into account the underline. It looks like getting things to line up with just some CSS is tricky. Replace the CSS code I gave with the following. .header-nav-item--divider { padding: 0.1em 0; } Put the following in Settings > Advanced > Code Injection > HEADER. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Put the following in Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { $( '.header-display-desktop .header-nav-item' ) .slice ( 0, -1 ) .after ( '<div class="header-nav-item header-nav-item--divider">' + '|' + '</div>' ); } ); </script> What this is doing is using Javascript, jQuery and some CSS to add the dividers in a way that shouldn't interfere with the underline. Let us know how it goes.

Second shot! /* desktop */ .header-nav-folder-item:nth-of-type(12) { border-bottom: 1px solid; padding-bottom: 1em; } .header-nav-folder-item:nth-of-type(13) { padding-top: 1em; } /* mobile */ .header-menu-nav-item:nth-of-type(13) a { display: inline-block; border-bottom: 1px solid; padding-bottom: 1em; } .header-menu-nav-item:nth-of-type(14) a { padding-top: 1em; } This CSS is very specific to your current menu layout. If you change the order of the menu items then you need to update the CSS. If you add another Folder Page and it has as many or more items then it too would pick up this CSS. In that case another way to target the menu you want to style would be needed. Something like .header-nav-item header-nav-item--folder:nth-of-type(n); Let us know how it goes.

Sorry I completely missed that requirement. I'd be glad to give it another go. However your site is now private. Please set up a site-wide password. Post the password here and then we can take a look at your issue.

Go to Blog Settings > SEO and at the bottom of the dialog there are three options for hiding information from search engines? Is that what you are looking for? Let us know how it goes.

This is one way it could be done. Put the following in Design > Custom CSS. .header-nav-folder-item { border-bottom: 1px solid; padding-bottom: 1em; padding-top: 1em; } .header-nav-folder-item:last-child { border-bottom: unset; } You can play with the border style and padding. This is for a 7.1 site. Let us know how it goes.

Try the following as a starting point. Put in Design > Custom CSS. .header-nav-item a:after { content: " | "; } .header-nav-item:last-child a:after { content: ''; } The previous is for a 7.1 site. Let us know how it goes.

Please see Mobile Menu Flyout. Let us know how it goes.

This is very general advice as I've not done this myself but it appears that you have to insert microdata tags into each of your products. Basically edit your product. Click on Additional Info. Add a code block. Enter your microdata tags. There seem to be several different specs that you can use to create your microdata tags. I'd probably pick JSON-LD. It seems to most economical format. I would suggest doing one product item to see if this is actually the issue. Let us know how it goes and what you learn.

I think @tuanphan just wanted the URL for your site so that anyone who might be able to help can take a look.

Please post the URL of the specific page where you are having this issue so we can take a look. It looks like there is another thread going on similar to this one.

Please set up a site-wide password so we can take a look at your site.

Perhaps SS viewed the move feature as not needed or a low priority as 7.1 Store pages now support 10,000 items. It wouldn't hurt to contact customer support and let them know that you want a Store move feature for 7.1.