Jump to content

Mobile Navigation in Skye

Recommended Posts

  • Replies 9
  • Views 1.1k
  • Created
  • Last Reply

@cstern01 If you want the hamburger menu to be changed into text instead of lines, copy and paste this code I show down below.

GO TO DESIGN> CUSTOM CSS>  AND COPY AND PASTE THIS CODE THERE> AND THEN CLICK SAVE. Note: You can change the text to what ever you want, you can change the size of the font, and you can change the text color by pasteing in an html color code into the 'color: section". You can find color codes by searching up the html color codes on google. For example the html code for the color black is: #000000 . Let me know if this helps you, or if you need more help please reply back. Thanks!

// Mobile Menu Text //

.burger-box:after {
content: "Menu";
text-align: right;
font-size: 16px;
color: #FFFFFF;
display: block !important;
}

.burger-box {
  width: 60px !important;
  height: 25px !important;
}

.burger-box div {
display: none;
}                       OR
// Mobile Menu Text //

.burger-box:after {
content: "Menu =";
text-align: right;
font-size: 16px;
color: #FFFFFF;
display: block !important;
}

.burger-box {
  width: 60px !important;
  height: 25px !important;
}

.burger-box div {
display: none;
}  

 

 

Link to comment
  • 2 weeks later...
5 hours ago, cstern01 said:

Thank for the help! However, neither code seemed to work. As for the first question, the mobile navigation bar comes up at the bottom of the screen in the Skye templates. I'd like to change it to appear on the top instead. 

No problem! And What Squarespace version do you use? Because that can be the reason the code isn’t working right. And also I will look into the next question further later. Thanks!

Link to comment
On 9/22/2020 at 7:36 PM, cstern01 said:

Thank for the help! However, neither code seemed to work. As for the first question, the mobile navigation bar comes up at the bottom of the screen in the Skye templates. I'd like to change it to appear on the top instead. 

Hmm it looks as if the bottom navigation is built in with the template. But I will really try and move that to the top of the header.

Link to comment

I believe I have a solution for moving the menus to the top of the page on mobile.

Not sure about the burger to text. What text do you want in the place of the burger?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@cstern01 Since you are on version 7.0, I thank taunphan for giving out this code. Copy and paste this code down below in the custom css section, located in the design page. Note: You can change the text to what ever you want, by typing anything in the content part of the code.

#mobileMenuLink a {
    visibility: hidden;
}
#mobileMenuLink a:before {
    content: "Click here to view Menu";
    visibility: visible;
    margin-left: 20px;
}
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.