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://derricksaenz.com Hello! I am working on getting my website to look nice and clean, and one of the things on my mind is getting the header to be concise. So, I wanted to use a hamburger menu to collapse all my navigation and put it on the side of my website. However, the problem is that when I open it, there is some padding issue with the flex box or something, and it pushes all my links to the side. I would want everything left or center justified to the square I have set. Pasting my code below for reference. All found free while scouring the internet. /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none !important; } /* Hide header button */ .header-actions { display: none !important; } /* show burger */ .header-burger { display: flex !important; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; } } @media screen and (min-width:992px) { .container.header-menu-nav-item, .header-menu-nav-item a, .header-menu-actions.language-picker-content, .header-menu-actions.language-picker { font-size: 28px !important; margin-top: 0px !important; margin-bottom: 5px !important; min-width: unset !important; } .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; margin-left: 66% !important; margin-right: 10% !important; margin-top: 1.75% !important; height: 33% !important; box-shadow: 0px 30px 100px rgba(12,112,232,.5) !important; transition: opacity .5s cubic-bezier(0.32, 0.08, 0.24, 1); -webkit-transition: opacity .5s cubic-bezier(0.32, 0.08, 0.24, 1); } .header-display-mobile .header-title-text { width: 20vw !important; font-size: 1.5rem !important; } .header-menu-nav-folder-content { justify-content: flex-start !important; /* vertical alignment of navigation */ text-align: center !important; /* navigation text alignment */ } .header-menu-nav-folder:not(.header-menu-nav-folder--active) { display: none !important; /* hides non-active folder */ } .header-menu-cta { width: 33vw !important; /* width of button */ } .header-menu-cta a { min-width: unset !important; } } The away that my code is set up, it doesn't allow for folders or the language switch option, which sucks since I'd appreciate those features. They just get pushed off the blue background. If that issue can be addressed too, that would be AWESOME, but I'm mainly holding out for the spacing since that more pertinent. I am somewhat trying to emulate clay.global's header, given that I have a clean aesthetic and a similarly simple logo going. I think that looks awesome and super intuitive despite it being hidden in a hamburger. I would appreciate any help or insight. Feel free to criticize the code too if you want 😅. Thank you!
  2. Site URL: https://symposium2023.com Currently having an issue with our site where on mobile if you click a link to another page, then click the back button on your browser, the mobile menu burger is unresponsive. You either have to click the home button/logo or refresh and it works again. In addition, if you navigate to another page after opening the menu overlay, if you click back, the overlay will open instead of the page. The X in the top right is also unresponsive so you can't exit the overlay without refreshing. This has been replicated on multiple devices and browsers. There's no custom code on the site so I'm not sure what could be causing the issue. Any help would be greatly appreciated! Here are the steps on mobile for issue with menu + overlay. Visit the homepage Click the menu -> Info -> Four Seasons Click backwards on your browser Try to exit the menu overlay Mobile menu issue, just burger icon Visit the homepage Click the “Let me explain” link Click backwards on your browser Try clicking the hamburger menu.
  3. Site URL: https://www.amandaramirezhomes.com/ On the homepage, my burger menu automatically selects one of the pages on the menu. But when I am on the burger menu in another page, it operates just fine. on Mobile, the burger menu does not work at all... Please help. Thank you. Here is a screen recording. Burger Menu Issues.mov
  4. 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?
  5. 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.
  6. 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!
  7. Site URL: https://removed.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:
  8. 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
  9. 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!
  10. 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!
  11. 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!
  12. Site URL: https://chef-andy-wright.squarespace.com/ Hi, I would like to change the desktop navigation to a hamburger Password:chefandy Thank you
  13. 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!
  14. 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;}
  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://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
  17. 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/
  18. 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!
  19. 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
  20. 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!
  21. 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; }
  22. 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!
  23. 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
  24. 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!
  25. 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; } }}
  • Create New...