Jump to content

Flatiron floating nav to the right with CSS breaks Mobile view nav?

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://jacksonruckar.com

So I'm using 

#navigator header#topBar ul#nav {
    display: block;
    float: right;
}

to make the nav bar on flatiron pop over to the right, but when I do this it breaks the mobile view. I was going to fix this by just disabling the mobile view that squarespace does in template settings, but that's actually killing my load times and user experience on mobile. anyone know a fix t make mobile not behave this way?

I re-disabled it because the nav being messed up looks so bad, but I can redo it if someone needs it to find a fix. 

The nav in the red circle shouldn't even show up on mobile, but only does when I use the code mentioned above to move the nav on desktop.

 

IMG_1008.png

Link to comment
  • Solution

Add to Design > Custom CSS

@media screen and (max-width:640px) {
nav.main-nav.dropdown-hover {
    display: none;
}
section#container {
    margin-top: 85px !important;
}
div#mobileNav {
    float: right;
    position: relative;
    bottom: -5px;
}
.siteTitle * {
    font-size: 30px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.