cstern01 Posted September 13, 2020 Share Posted September 13, 2020 Site URL: http://www.thefreerepublicofcalifornia.com Hi, Does anyone know how I could change the mobile navigation so it stays at the top, version the bottom? And is there a way to change the 'burger' lines to text? Thanks!! Link to comment
inunzi Posted September 13, 2020 Share Posted September 13, 2020 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. Link to comment
inunzi Posted September 13, 2020 Share Posted September 13, 2020 @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
cstern01 Posted September 23, 2020 Author Share Posted September 23, 2020 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 comment
inunzi Posted September 23, 2020 Share Posted September 23, 2020 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
inunzi Posted September 26, 2020 Share Posted September 26, 2020 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
cstern01 Posted September 27, 2020 Author Share Posted September 27, 2020 Great, thanks! Link to comment
inunzi Posted September 27, 2020 Share Posted September 27, 2020 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 comment
creedon Posted September 27, 2020 Share Posted September 27, 2020 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
inunzi Posted September 27, 2020 Share Posted September 27, 2020 @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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.