dylanseeger Posted February 22, 2013 Share Posted February 22, 2013 (edited) I’d like to hide the mobile navigation menu, and instead just scale out my navigation menu underneath the title of my site when viewed on an iPhone. I do not want to disable the mobile style completely, just the menu drop down. Any way to do this through CSS or code injection? Thanks! My site is dyln.me. Edited July 19, 2016 by claine turtlebaby 1 Alternative musician. I made Readers & Reporters. Link to comment
foleyatwork Posted February 22, 2013 Share Posted February 22, 2013 Can you add a link to your site? Developer Evangelist at Squarespace. Link to comment
dylanseeger Posted February 22, 2013 Author Share Posted February 22, 2013 Sure. http://dylanseeger.com Alternative musician. I made Readers & Reporters. Link to comment
dylanseeger Posted March 8, 2013 Author Share Posted March 8, 2013 Anybody able to help with this? Thanks! Alternative musician. I made Readers & Reporters. Link to comment
trevordelaney1570047683 Posted March 8, 2013 Share Posted March 8, 2013 (edited) Try adding this to the Custom CSS Editor: .page-borders-none #mobileMenuLink { display: none !important; } Edited March 8, 2013 by trevordelaney Squarespace Designer / Developer over @ Hop Creative. Link to comment
dylanseeger Posted March 8, 2013 Author Share Posted March 8, 2013 That works for hiding the mobile menu, but is there any way to make the menu items display underneath the title on the mobile site? Because right now with that CSS tweak there is no menu at all. Thanks so much! Alternative musician. I made Readers & Reporters. Link to comment
Guest Posted August 7, 2014 Share Posted August 7, 2014 (edited) Using .main-nav worked for me. Information on IDs and classes to refer to and change are in the navigation.block file. Edited August 7, 2014 by LilyS Link to comment
goldntriangles Posted November 20, 2014 Share Posted November 20, 2014 (edited) Trying to do the same thing as dylanseeger or even just turn the mobile navigation “hamburger” to white on the homepage only. I am using the Forte template. By any chance do you know what code I should use to get this to work? Thanks! Edited November 20, 2014 by goldntriangles Link to comment
AishaDubbs Posted December 23, 2014 Share Posted December 23, 2014 Is there a way to do this, but for the standard site? (not mobile). Link to comment
Guest Posted February 10, 2016 Share Posted February 10, 2016 > Re: LilyS · Aug 07, 2014 at 05:23 PM 0 Using .main-nav worked for me. Information on IDs and classes to refer to and change are in the navigation.block file. > Did anyone find a solution to this to display the menu but not in dropdown form (mobile only). Could someone expand on LilyS's comment? Not sure how to do that. My website www.pathxo.com Thank you! Link to comment
Solution joncasey5 Posted August 26, 2016 Solution Share Posted August 26, 2016 This worked best for me. I used Hayden, but I imagine this will work for other templates. Go to DESIGN, CUSTOM CSS and add the following: /** hide nav menu icon on mobile **/ .top-bar, .middle-bar, .bottom-bar { display:none !important; } label.mobile-nav-toggle-label.fixed-nav-toggle-label { display:none !important; } Link to comment
PersistentFellow Posted February 5, 2017 Share Posted February 5, 2017 Thanks a ton joncasey5! Link to comment
designer Posted February 8, 2017 Share Posted February 8, 2017 @Danieljay @LilyS @trevordelaney @joncasey5I also wish to display the desktop navigation on my mobile versions (I am using the Bedford template). So far, all solutions I've tried remove the hamburger but do not replace it with text navigation. I do not understand the comment re using .main-nav. Thank you. Link to comment
robredcay Posted November 21, 2017 Share Posted November 21, 2017 FWIW, other answers did not work for me. I tinkered around and was able to hide the mobile nav on my site by using the following CSS code. (I'm using the "Fulton" template)./* Hide mobile nav */.mobile-nav-toggle-label.show-on-scroll-mobile { display: none; } Link to comment
one27mediahouse Posted December 18, 2020 Share Posted December 18, 2020 Bumping this here and on other forum! There seems to be no clear answer on forcing desktop menu on mobile. Link to comment
tuanphan Posted December 22, 2020 Share Posted December 22, 2020 On 12/18/2020 at 9:26 AM, one27mediahouse said: Bumping this here and on other forum! There seems to be no clear answer on forcing desktop menu on mobile. If you use SS 7.1. add this to Design > Custom CSS @media screen and (max-width:767px) { .header-display-desktop { display: flex !important; } .header-display-mobile { display: none !important; } .header-burger { display: none; } .header-title-nav-wrapper { flex: 1 0 100% !important; } .header-nav { display: flex !important; width: 70% !important; flex: 1 1 70% !important; } .header-title { flex: 1 0 30% !important; } } DKP and Corizona 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
arogspace Posted March 12, 2021 Share Posted March 12, 2021 On 12/22/2020 at 11:39 AM, tuanphan said: If you use SS 7.1. add this to Design > Custom CSS @media screen and (max-width:767px) { .header-display-desktop { display: flex !important; } .header-display-mobile { display: none !important; } .header-burger { display: none; } .header-title-nav-wrapper { flex: 1 0 100% !important; } .header-nav { display: flex !important; width: 70% !important; flex: 1 1 70% !important; } .header-title { flex: 1 0 30% !important; } } This is excellent and assists with my issue also, however I'd love to have the navigation on mobile sit to the far right corner. Is there a tweak to this code to cater for this? Currently it sits just to the right of my logo on the top left. Corizona 1 Link to comment
tuanphan Posted March 21, 2021 Share Posted March 21, 2021 On 3/12/2021 at 7:51 AM, arogspace said: This is excellent and assists with my issue also, however I'd love to have the navigation on mobile sit to the far right corner. Is there a tweak to this code to cater for this? Currently it sits just to the right of my logo on the top left. Can you share link to your site? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DoomVintage Posted February 13, 2023 Share Posted February 13, 2023 Hey guys! This has been super helpful in removing the hamburger/double line upper R corner navigation from small devices/phones and when viewing from a computer. I recently noticed, however, that these nav bars still appear when I access my site on an ipad. Any thoughts on how to remove it from there as well? Thank you. www.doomvintage.com Link to comment
tuanphan Posted February 16, 2023 Share Posted February 16, 2023 On 2/14/2023 at 4:04 AM, DoomVintage said: Hey guys! This has been super helpful in removing the hamburger/double line upper R corner navigation from small devices/phones and when viewing from a computer. I recently noticed, however, that these nav bars still appear when I access my site on an ipad. Any thoughts on how to remove it from there as well? Thank you. www.doomvintage.com Add to Design > Custom CSS .burger-inner { visibility: hidden; } DoomVintage 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ckmck Posted February 24, 2023 Share Posted February 24, 2023 On 12/21/2020 at 7:39 PM, tuanphan said: If you use SS 7.1. add this to Design > Custom CSS @media screen and (max-width:767px) { .header-display-desktop { display: flex !important; } .header-display-mobile { display: none !important; } .header-burger { display: none; } .header-title-nav-wrapper { flex: 1 0 100% !important; } .header-nav { display: flex !important; width: 70% !important; flex: 1 1 70% !important; } .header-title { flex: 1 0 30% !important; } } This worked for me but now my logo is left justified. I'd like it to be centered. Any ideas? Image attached. wzrdofthestnk 1 Link to comment
tuanphan Posted February 27, 2023 Share Posted February 27, 2023 On 2/25/2023 at 5:18 AM, ckmck said: This worked for me but now my logo is left justified. I'd like it to be centered. Any ideas? Image attached. It looks like you solved it? wzrdofthestnk 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
wzrdofthestnk Posted February 21 Share Posted February 21 On 2/27/2023 at 11:38 AM, tuanphan said: It looks like you solved it? Made it work, so that it is on the right side again. By changing this } .header-nav { display: flex !important; width: 70% !important; flex: 1 1 70% !important; } .header-title { flex: 1 0 30% !important; } } to this } .header-title-nav-wrapper { flex: 1 0 100% !important; } .header-nav { display: flex !important; width: 70% !important; flex: 1 1 0% !important; } .header-title { flex: 1 0 90% !important; } } tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment