Darya

Hello! Following!
I am having the same issue on my websites - I would like to find a solution for this as well. 
 

You mean Ipad Pro Landscape mode? On most tablets, the header will change to the burger menu

@KEYdance I've put together a simple guide. Let me know if it helps:
https://sf.digital/squarespace-solutions/add-a-hover-effect-to-the-squarespace-71-navigation
Did this help? Please give feedback by clicking an icon below  ⬇️

The code for SS 7.0 version, your site is 7.1. Use this code
body.homepage .header-nav-item a { color: white !important; }  

To fix dropdown, add this code
<style> /* Fix dropdown */ .header-actions--right .header-nav-folder-content { opacity: 0; pointer-events: none; position: absolute; top: auto; left: auto; padding: .5em 1em; text-align: left; width: 200px; z-index: 10; margin-left: -1em; } .header-actions--right a.header-nav-folder-title { text-decoration: none; backface-visibility: hidden; padding: .1em 0; } .header-actions--right .header-nav-item--folder:hover .header-nav-folder-content { opacity: 1; pointer-events: auto; } </style> You mean when user on Our Store >> Make it underline?

Hi,
Can you change layout to Left Nav - Middle Logo?
Then add this to Settings > Advanced > Code Injection > Footer
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile'); }) </script> <style> .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;} .header-nav-item:nth-child(n+4) { margin-right: 1.5vw; } </style>  

Edit this code
.header-nav-item--active a { background-image: none !important; color: #ce0058 !important; } to this
.header-nav-item--active>a { background-image: none !important; color: #ce0058 !important; }  

Hi,
Add to Design > Custom CSS
/* dropdown */ div.header-nav-folder-content { width: auto !important; min-width: unset !important; }  

worked like a charm! thanks @tuanphan

.folder .subnav { background: rgba(0,0,0,0.5) !important; }

Add to Home > design > Custom CSS
/* privacy text */ .newsletter-form-footnote * { color: white !important; opacity: 1 !important; }  

Welcome 👋.
Solutions are often specific to the template/version you are using and the settings you have selected so when you're asking a question it's really helpful if you can supply us with the site's URL. You'll find it in the browser's toolbar ending with .squarespace.com (without the /config/... section). If the site isn't public or live yet, we'll also need you to set a public password in the visibility settings and tell us what it is.

Add to Home > Design > Custom CSS
@media screen and (max-width:767px) { .header-menu-bg.theme-bg--primary { background: red !important; } } If you know HTML/CSS, you can use Inspect Element (Right Click) to find these ID/Class.
Reference: https://beaverhero.com/squarespace-71-css-list/