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://www.aplomb.studio/ Hi, can someone please help me with css so that I can hide my nav links on desktop, but have them visible on mobile. I want to have a drop down folder menu on my desktop only. Please see attached for reference and let me know if more clarity is needed.
  2. Site URL: https://bobcat-deer-6yf9.squarespace.com/ Hi, My hamburger menu on my mobile site is currently too inset. Does anyone know how I can fix this?
  3. Site URL: https://bettertotalk.com Hi, I would like to move the 'contact' button on my header menu, in mobile view. As you can see in the screenshot, it is was down at the bottom and obscured by the 'email' button. If possible, I would like it to be right under Ts & Cs. Any help is greatly appreciated!
  4. 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/
  5. Site URL: https://www.carmelart95years.com Hi! SOS! In mobile view, when I try to open up the "hamburger" navigation drop down menu – it shows up blank. I have three navigation tabs that should show up. Any help would be greatly appreciated. Thanks, Grace
  6. Site URL: https://www.covidlonghaulers.com/ I have a need to hide certain items from the mobile hamburger menu, as I have done in the desktop view. However the code to hide from desktop doesn't currently translate to mobile. Could you help me fix this? I'm using 7.1. The pages that need to be hidden are currently turned off but will be turned online soon. Here's the website: https://www.covidlonghaulers.com/ Heres' the code I'm using to turn off some links in the desktop: <style> .header-nav-item:nth-child( 1 ) { display : none; } .header-nav-item:nth-child( 3 ) { display : none; } .header-nav-item:nth-child( 5 ) { display : none; } .header-nav-item:nth-child( 7 ) { display : none; } .header-nav-item:nth-child( 9 ) { display : none; } .header-nav-item:nth-child( 11 ) { display : none; } </style> Thank you!
  7. Site URL: http://www.fieldscoutstudio.com Hi - I need help removing the active link line on the navigation menu. I added a .header-burger and it added a line. Can't find anything that will fix it. Thanks!
  8. Site URL: http://rust-lavender-rxjl.squarespace.com Hi, My website has a hamburger menu and I used a custom code to implement it. The hamburger navigation looks fine on the desktop website but it looks different on mobile website. Can someone please help me make the navigation the same for the mobile as it is for the desktop website? Site URL: http://rust-lavender-rxjl.squarespace.com Site password: mallorykaye1 Thanks!
  9. Site URL: https://chef-andy-wright.squarespace.com/ Hi, I would like to change the desktop navigation to a hamburger Password:chefandy Thank you
  10. Site URL: http://rust-lavender-rxjl.squarespace.com Hi, Can someone please help me make the hamburger icon left aligned on the desktop website and also the text that appears after you click on the icon needs to be smaller and left aligned. I have attached a photo of a mockup how it should look. Site password: mallorykaye1 I have used a custom code to implement the hamburger navigation in the website: .header .header-burger{display:flex;} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible; } Any help will be much appreciated! Thank you for your time!
  11. 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;}
  12. 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
  13. Site URL: https://khaki-porpoise-sfnz.squarespace.com/config/settings Hello I would like the menu to be in text and not in a hamburger on the mobile version anyone would know the coding for this ? thanks a bunch
  14. Site URL: https://www.questfinancialcoaching.com/ Can someone help me add a background to the hamburger menu? I'd like to add a background that covers both the hamburger menu + the word "MENU." Right now it just covers "MENU" Similar to this example - https://jana.showit.site/
  15. 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!
  16. 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
  17. 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!
  18. 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; }
  19. 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!
  20. 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
  21. 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!
  22. 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; } }}
  23. 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
  24. 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; } }
  25. 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/
  • Create New...