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

Search the Community

Showing results for tags 'hamburger'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://lettuce-triceratops-wyn3.squarespace.com/ Just trying to throw up a really quick and dirty landing page to collect emails. On the mobile version, I notice the site displays a menu button on the type right. I tried playing around in the settings but all I get are options to change the aesthetic of the icon or some visual element but not to remove the icon entirely. We only have the landing page so it doesn't make sense to have a blank menu that has nothing and it looks unprofessional. I purchased the personal plan by the way. Edited to add the domain: https://lettuce-triceratops-wyn3.squarespace.com/
  2. Hello! I'm just getting started with building out a 7.1 site for a client and was wondering if there was a way to recreate the hamburger menu similar to this site? The hamburger menu with the word "menu" next to it? https://jana.showit.site/ Thanks!
  3. Site URL: http://www.lesliefang.com/pawalong I'm not sure why but the hamburger menu is not working on the page below? When I click on the menu instead a line appears at the bottom of the header. I try a few CSS code but had no success. All the other pages work fine except this one. I'm not sure what happen on this page. Any tip or code I can do to fix this? Thank you! www.lesliefang.com/pawalong
  4. Site URL: https://tambourine-khaki-6f3e.squarespace.com/ Hi! I have a custom font I am using on my site (Cooper Nouveau). I am wanting to change the nav links in my hamburger menu to this custom font. I inserted this code, however it did not work: header-burger { font-family: 'PLWestCooperNouveau' !important; } Any tips? Thank you!
  5. Site URL: http://www.goedland.nl Hi all! I'm looking for a way to hide the mobile hambuger menu on a few specific pages of my website.. How do I best do this? In my Custom CSS I've added the following code on the pages I needed to hide the main navigation & footer. In this I have succeeded, but the hamburger on mobile remains... Also is there an easier way to hide the main nav and footer than what I've used now? Thanks in advance! #collection-5ea43d4d14bd4f0e74ba7e12 .Header-nav { display: none!important; } #collection-5ea43d4d14bd4f0e74ba7e12 .Footer { display: none!important; } #collection-5ea442813c53f87600534627 .Header-nav { display: none!important; } #collection-5ea442813c53f87600534627 .Footer { display: none!important; } #collection-5ea442b5f222897b8d590132 .Header-nav { display: none!important; } #collection-5ea442b5f222897b8d590132 .Footer { display: none!important; } #collection-5ea442c7a9fa910a7d7f11b2 .Header-nav { display: none!important; } #collection-5ea442c7a9fa910a7d7f11b2 .Footer { display: none!important; } #collection-5ea442c28315084d6dba2579 .Header-nav { display: none!important; } #collection-5ea442c28315084d6dba2579 .Footer { display: none!important; } #collection-5ea442cebe3c470ba754c787 .Header-nav { display: none!important; } #collection-5ea442cebe3c470ba754c787 .Footer { display: none!important; } #collection-5ea442bbb1653635c3af81f4 .Header-nav { display: none!important; } #collection-5ea442bbb1653635c3af81f4 .Footer { display: none!important; } #collection-5ea442af1d0fc8570b270cfe .Header-nav { display: none!important; } #collection-5ea442af1d0fc8570b270cfe .Footer { display: none!important; } #collection-5ea44341397d8072ce4662c6 .Header-nav { display: none!important; } #collection-5ea44341397d8072ce4662c6 .Footer { display: none!important; } #collection-5ea443362fec9937a4430f10 .Header-nav { display: none!important; } #collection-5ea443362fec9937a4430f10 .Footer { display: none!important; } #collection-5ea4433b00047c5743af480b .Header-nav { display: none!important; } #collection-5ea4433b00047c5743af480b .Footer { display: none!important; } #collection-5ea44325ee86164fffff2b3e .Header-nav { display: none!important; } #collection-5ea44325ee86164fffff2b3e .Footer { display: none!important; } #collection-5ea4432b397d8072ce466142 .Header-nav { display: none!important; } #collection-5ea4432b397d8072ce466142 .Footer { display: none!important; } #collection-5ea4433089503f2e48088ef6 .Header-nav { display: none!important; } #collection-5ea4433089503f2e48088ef6 .Footer { display: none!important; } #collection-5ea443878315084d6dba3c03 .Header-nav { display: none!important; } #collection-5ea443878315084d6dba3c03 .Footer { display: none!important; } #collection-5ea4437de702471b5a2a30f4 .Header-nav { display: none!important; } #collection-5ea4437de702471b5a2a30f4 .Footer { display: none!important; } #collection-5ea442a78315084d6dba22b4 .Header-nav { display: none!important; } #collection-5ea442a78315084d6dba22b4 .Footer { display: none!important; }
  6. Site URL: https://primemetny.squarespace.com Site URL: primemetny.squarespace.com Site PW: 1500 As you can see I am currently using the hamburger menu with slide in-out effect, I also added a dark overlay when the hamburger slide out, it was working just perfectly and then it happened to be presented as a full dark overlay sometimes, yes, it is sometimes but not always. This drives me crazy, can someone help me to check if there is any codes I can change? //overlay under menu .header-menu:after { content: ''; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: black; opacity: 0; transition: opacity 1.5s ease; z-index: -1; pointer-events: none; } .header--menu-open .header-menu:after {opacity: 0.6;}
  7. Hey everyone, I just started using Squarespace free trial, and I am just starting with the design of my website. I am pretty happy with how the desktop site looks but not really with the mobile website. What I want to do is keep using the desktop navigation menu on mobile, because on mobile the menu becomes a hamburger, but I just want to keep the text on the website because otherwise it looks kinda empty on mobile. I added images on how I want it to be, you can see that it is just the regular menu instead of the hamburger. Thanks!
  8. Site URL: https://www.sabustudio.com Hi, I have set up my navigation for desktop, it is all working as I want on desktop, although I am having issues with it on mobile device. On desktop I have integrate this code so the folders redirect to specific pages: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $('.header-nav-folder-title[href="/furniture-folder"]').click(function() { window.location = "https://sabustudio.com/furniture"; }); $('.header-nav-folder-title[href="/object-folder"]').click(function() { window.location = "https://sabustudio.com/object"; }); $('.header-nav-folder-title[href="/lighting-folder"]').click(function() { window.location = "https://sabustudio.com/lighting"; }); Although, on mobile the folder navigation does not utilise the redirect link as it does on desktop, it just links to the folder contents. It currently goes as follows: I would like it to go: I am trying to remove/bypass the second hamburger menu page and instead wanting to use the redirect link. This enables better user experience for my product. I'm not sure if its possible to do this, but I imagine there would be a way to do this. Any help would be much appreciated! Thanks
  9. Site URL: https://rthglmr.squarespace.com Password: rthglmr! Hello, I have managed to come quite far in my website with learning CSS but now I am SUUUUPER stuck. I am trying to have the same navigation on my desktop and mobile site. The desktop is working exactly how I wish it to and now I need the folders to be clickable onto a page on the mobile view. I would like to avoid the drop-down text menu and instead link to a page that is more visual. I would really appreciate any wisdom or insight on this!
  10. Site URL: https://franklywrite.squarespace.com/home Hi Team, I have tried a number of codes from different responses in the forum and nothing seems to be working... is anyone able to assist me in forcing a hamburger menu for this page https://franklywrite.squarespace.com/home I have been trying the below - But it keeps blanking out the menu and not showing anything. I can't work out why!! //Hamburger Menu Home Page// body#collection-620dde5869dba9120dfd8979{ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } }}
  11. Site URL: https://beyondspace-showcase.squarespace.com/custom-hamburger/?password=1234&utm_source=squarespace_forum&utm_medium=topic&utm_campaign=promo Hi my friends, I've been asking alot about applying fancy hamburger animation to Squarespace, so I tried to create a tool where the various animation can be fit well with Squarespace markup Access to this page for the step-by-step instruction to copy and paste the final code into your custom css, it will replace the current animation https://beyondspace-showcase.squarespace.com/custom-hamburger Note: This solution is specifically for applying custom animation, with options to change color of normal and active state, other term such as width or thickness will need to be implement manually videos.mp4
  12. Site URL: https://lychee-fish-d69t.squarespace.com/ Hi, I am trying to make my desktop site menu the same as mobile menu without affecting mobile menu. I got a code from other questions in forum but it seems that the line height is much bigger. Anyone can help me to make it more smaller without affecting the mobile design? I also want to make the box smaller and lower the opacity of the background. THanks Here's the code that I am using : .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible; width: 30%; margin-left: 70%; box-shadow: -5px 5px 15px #000} div.header-menu-nav-item a { font-size: 20px !important; padding: 10px; } .header-menu-nav-item {line-height: 10px!important;} @media screen and (min-width:992px) { .header-menu-actions { justify-content: center !important; } .header-menu-cta { position: relative; top: -100px; } } @media screen and (max-width:991px) { .header--menu-open .header-menu { width: 100% !important; margin-left: 0 !important; } }
  13. Site URL: https://studiofurks.com/ Hi, I wanted to make sure that on the mobile version my website, the 2 page links that I have would appear without the need of using the hamburger menu. Example of what I'd like: Link to current site: https://studiofurks.com/
  14. I want to change the mobile menu so it 1. has a white background with black text, 2, the pages inside the folders in the menu are hidden unless clicked, like on the desktop site, 3. the font size is much smaller and 4. the menu is minimized unless clicked. And then comes out from the side and not the top. I would also like a hamburger symbol and not “menu” if it is possible. I managed to change the size and colour, but then the menu just stayed open, and wouldn’t close. I am using the wells template. This is the code I used, but then the menu just stayed open and you could not click it to close it. @media screen and (max-width:640px) { div#mobileNav { background: white; height: 450px !important; } } #mobileNav li { a { color: hsl(0, 0%, 0%) !important; font-weight: 400; line-height: 1.3em !important; } &.active-link a { font-weight: 700 !important; } } /* mobile items size */ #mobileNav a { font-size: 10px !important; }
  15. Site URL: http://lbeedesigns.com Hi forum - I am having an issue with mobile view of my website on different devices. Template is Jaunt. The first view is how it should look on mobile with the white bar and the hamburger and my logo at the top. The "problem" home page is how the site is viewed in standard mode on my new iPhone 13 - no white bar or hamburger or logo and the social media/shopping bag are overlapped on the announcement bar. Oddly, if I turn my view on the iPhone 13 to "Zoomed" from standard - the white bar, etc. are there but most people keep their phones in standard view which creates a problem. On the iPhone 13 without the white bar, there is no way to navigate to my various pages on my site. I reached out to Squarespace help and they did not have a solution for me. Wanted to see if anyone else has encountered this issue or if there is some CSS available to fix this. I am not a programmer! Many thanks! - Lori
  16. Site URL: https://tangerine-gerbil-7cah.squarespace.com Hi, I have a site which is only 1 page (so no page/links in the header). However, on mobile it looks odd having the hamburger menu open and it being empty with the 'contact' button at the very bottom. Is it possible to centralise this button on mobile only? Or move it up in the space (image attached) If not, can we remove the hamburger menu from mobile completely? Thanks in advance! :)
  17. Hello, How can I change the height of the hamburger menu and also turn off the animation of it turning into an 'X'? Thanks, R
  18. Site URL: https://terrier-turbot-7tat.squarespace.com/ Hi there, About my hamburger menu as you can see in the screenshots. My web URL: https://terrier-turbot-7tat.squarespace.com/ My web PW: 1234 1. See the screenshot1. Is there anyone know how to move the social icon to the center and move the action button up a little bit? 2. If you see the screenshot2 which is the mobile view of the menu and it looks weird, I don' know somehow my codes affect the mobile as well, so is there a way to avoid change of my mobile menu but only on desktop view?. Below are my code: .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible; width: 30%; margin-left: 70%; box-shadow: -5px 5px 15px #000} div.header-menu-nav-item a { font-size: 30px !important; padding: 10px; } .header-menu-nav-item {line-height: 20px!important;} Thank you! Leesh
  19. Site URL: https://www.orme-architecture.com/ I'm frustratingly working on a website which uses a 7.0 template (and I am having to relearn some basic things that I've learnt on 7.1). For some reason the site's mobile navigation doesn't become a hamburger. Do you know why this might be. I can not find anywhere to change it and have not seen any CSS to force it to become a hamburger menu. The site is: https://www.orme-architecture.com/ Thanks
  20. Site URL: https://www.isabelparra.com Hi All, Trying to get my navigation menu to open to the right side of the screen vs left. Here is a screen shot of what it is opening to now? Any help will be much appreciated!
  21. Hi, Anyone know how to turn the nav on the desktop version into a hamburger? I want mine in the top right corner.
  22. Site URL: https://alexandrasaphire.squarespace.com/ Hello, Im trying to remove my mobile text drop-down menu and replace it with a hamburger. I found some code on another forum that allowed me to add the hamburger /* HAMBURGER NAVIGATION */ #mobileMenuLink a:after { content: '☰'; color: hsl(63, 1%, 50%); width: 100%; text-align: left; position: absolute; top: 0; left: 0; } But now i have both hamburger and text drop down menu and the hamburger is very tiny with no padding. Any help would be very much appreciated! Thanks!
  23. Site URL: http://katiecaftravel.com Hi all, when my site is on tablet/phone size the nav bar compresses to a hamburger icon that needs to be clicked to open - problem is it's only working on half the pages! SQ SP help doesn't want to help because I have custom code on my site - I have a custom code side bar I bought from SQ SP Themes https://www.sqspthemes.com/plugins/sidebar-plugin That I thought could be the problem but pages where I have the side bar still have the hamburger working - it seems like a random issue. like it's not working on this page https://www.katiecaftravel.com/indonesia but it's working on this page https://www.katiecaftravel.com/travel-diaries _________________________________________________________________________________ EDIT: The problem is 100% the SQSP THEMES sidebar. I took two identical pages and removed the sidebar from the head code on one and it fixed the issue. Without sidebar: https://www.katiecaftravel.com/indonesia with sidebar: https://www.katiecaftravel.com/mexico So... I mean what to do now? I bought this sidebar for $60 because it was made especially for Squarespace, but it's disabling my hamburger nav on all the pages I put it on (except blog pages, randomly) - Squarespace can't help because it's a custom code issue. Anyone know any quick fixes for this? this is the code I inject into the header: <!-- Plugin Sidebar --> <link href="/s/plugin-sidebar.css" rel="stylesheet"> <script src="/s/plugin-sidebar.js"></script> <script>pluginSidebar({"url":"sidebar","allowedPages":"*"});</script> <!-- end Plugin Sidebar -->
  24. Site URL: http://www.wonderneath.com Hello, On our home screen and a couple other random pages, whem the hamburg icon shows up the information that usually shows is replaced with the footer info and messes up the whole function of the page. I don't know why this happened and I can't seem to fix it. Any insight would be super helpful. I have attached two photos, one is the footer as the navagtion bar and the other is a page that is fuctioning normally. Url is www.wonderneath.com Thank you.
  • Create New...