Jump to content

Apply custom code to mobile menu

Recommended Posts

Hello,

 

I have a custom code that I am using for my main navigation bar on my website. It looks great on my desktop but I can't seem to put it in the mobile menu on Squarespace 7.1. could anyone help me as to how I can insert the custom code into the mobile menu? 

 

Thank you!

Link to comment
  • Replies 2
  • Views 724
  • Created
  • Last Reply

https://azalea-orchid-drz4.squarespace.com/config/design/custom-css

The code is quite a long one.

CSS:

#secondary-menu ul {
list-style-type: none;
padding-left: 10;
margin: center;
text-align: left
}
#secondary-menu li {
display: inline-block;
posistion: absoulute;
left: 0px;
padding: 1px;
font-size: 16px;
text-align: left
 color: #000;
transition: background 1s, color 1s;
}

#secondary-menu li:hover > ul {
display: block
}

@media screen and (max-width: 930px) {
#secondary-menu li {
padding: 15px;
}
}
@media screen and (min-width: 930px) {
#secondary-menu {
position: absolute;
width: 85%;
z-index: 999;
top: 50px;
}
}

body {
            font: 16px arial, helvetica, sans-serif;
            background: #333;
            color: #000;
        }
    
        a {
            color: #fff;
        }
    
        ul {
            padding: 0;
            margin: 0;
            background: #;
            float: center;
        }
    
        li {
            float: left;
            display: inline;
            position: relative;
            width: 80px;
            list-style: none;
        }
    
        ul ul {
            text-indent: -20px;
            margin-left: 20px;
            position: absolute;
            left: 0;
            top: 100%;
            background: #000;
            display: none;
        }
    
        ul ul ul {
            left: 100%;
            top: 0;
            background: #000;
        }
    
        li:hover > ul {
            display: block;
        }
    
    
        p {
            clear: left;
            padding-top: 1em;
        }
        
        @media screen and (max-width: 930px) {
#secondary-menu li {
padding: 15px;
}

}
@media screen and (min-width: 930px) {
#secondary-menu {
position: absolute;
left: 300px;
width: 80%;
z-index: 999;
top: 75px;
}
}

 

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.