Jump to content

Simplymarble

Member
  • Posts

    2
  • Joined

  • Last visited

Everything posted by Simplymarble

  1. Try this, Put your code between the brackets : @media screen only and (max-width: 640px) {code goes here}
  2. Hi all, While designing a website I used a code for my navbar that I felt like wasn't working correctly. So I decided to remove it and replace it with a forced mobile menu code instead. Problem is, my previous code is affecting my forced mobile menu code. And now it looks like the first pic: Instead of the second pic (Another of my websites) I know this is caused by my first code because I have tested the forced mobile menu code on three different websites with no issues. This is the code I removed and has seemingly broken my site: @media (min-width: 767px) { /* Fullwidth navigation border*/ // Remove Active Nav Line - Ghost // .header-nav-item--active a { background-image: none !important; } .header-announcement-bar-wrapper { padding-left: 0px !important; padding-right: 0px !important; } .header-display-desktop { flex-direction: column; } .header-title-nav-wrapper { flex: 0 0 100% !important; margin-right: auto; width: 100% !important; } nav.header-nav-list { display: flex; width: 100%; border-top: 2px solid; border-bottom: 2px solid; } .header-nav-item a { line-height: initial; padding-top: 15px !important; padding-bottom: 15px !Important; } .header-nav-item { border-left: 1px solid; border-right: 1px solid; margin: 0 !important; padding-left: 2vw; padding-right: 2vw; margin-left: -1px !important; } nav.header-nav-list { justify-content: center !important; flex-wrap: nowrap; } nav.header-nav-list>div { width: 20%; } // Cart and buttons // .header-actions.header-actions--right { position: absolute; inset: auto 4vw 1rem auto; bottom: 11vh; } // Social icons // .header-actions.header-actions--left { position: absolute; left: 8vw; top: 3vh; } } This is the code I am using now: // Forced mobile // .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible; } This is also the exact code I am using in the second photo. My website is https://beige-parsnip-rxyj.squarespace.com/ , password: 1234 Thank you in advanced!
×
×
  • 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.