Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Mobile Navigation in Skye


cstern01

Question

  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Great, thanks!  

9 answers to this question

Recommended Posts

  • 0

Are you trying to make the hamburger menu button say “menu” instead of the lines or something else? And what do you mean in the first question, because I think I can help. 

Edited by inunzi
Link to post
  • 0

@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 post
  • 0

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. 

Link to post
  • 0
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 post
  • 0
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 post
  • 0
3 hours ago, cstern01 said:

Great, thanks!

 

One solution would be to download  another template, but i think there is high chance of loosing your progress. But I'm not 100% sure, so if I were you, I would talk to a squarespace member just incase.

Link to post
  • 0

@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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...