Jump to content

Search the Community

Showing results for tags 'hamburger'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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. I'm looking to hide the Hamburger Menu on Mobile since I am currently not using any additional pages and my website is set for a single page website. Anyone have a CSS code to remove that hamburger menu? Thanks!
  2. Hey folks. I was editing my SquareSpace page a few hours ago, and must've accidentally edited something. Because now clicking the Hamburger icon on my webpage no longer reveals its menu unless I'm the page size is about half the screen-size. As you can see in the image below, if I minimize the screen while in config mode, the Hamburger's menu appears as it should. But once I expand the page, the hamburger menu disappears and cant be re-opened. If I click on the hamburger icon, it does turns into an "X", but the hamburger menu does does not reveal itself. It seems like it has something do with screen size? In any case, is someone willing to help out? This is bit time-sensitive for me so a fast response would be greatly appreciated.,
  3. Hello! I'm back - looking to start over on my hamburger menu building - this time starting with mobile menu and working over to PC so as not to brick this function on all devices (what has happened currently). How would I build a burger menu like this for my website on mobile?: LSGJ.org I'm totally okay with rebuilding the burger menu on both PC and mobile browser from what it currently is, because I'm in charge of this website launching and I've only a few days until official launch. Any help appreciated - thank you in advance!
  4. I have everything nearly how I want it, except for the way the hamburger menu overlay displays in the mobile view. This is at present what it looks like when you click the hamburger button for the mobile view: I tried going to site styles->Colors->My Theme, selecting the theme I have assigned to my "site header" section, and looking for where I would set this color, but I can't seem to find it. I don't want this bright yellow background. Also, I'd like to be able to change the color of the buttons on this overlay. Where might I find within the theme how to change those colors? Everything else has been super easy and doable via the themes. I must just be tired and missing something obvious. Thanks for the help!
  5. Our website (www.great-marriages.org) switches the top navigation links into the hamburger menu when on mobile. I think this is intuitive but we have donors who complain that they can't find the donate button on mobile. Is there a way to make it so that the final navigation link (which goes to our Donate page) can show up on mobile outside of the hamburger menu? As a link or a button or whatever? I'm open to suggestions!
  6. Hi! We just launched our new website and unfortunately have found one of our most necessary features - the accordion/hamburger icon menu does not work on Apple devices (iPhones) that we've tested. Any help here? Works beautifully on PC and Android devices. Any help really appreciated! I'm not sure where to start with fixing this and our official launch is this weekend. (side note: this icon worked during dev/testing on iPhone before I connected my domain to our godaddy acct)
  7. 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/
  8. Hi all! Our website is for a hotel, therefore we have a floating widget at the top of all pages with date selections and a search link, which we want to keep. However when viewing on Mobile version the floating widget blocks our primary links when the hamburger drop down menu is opened. πŸ˜’ Anyone know how to work around this? I've tried maximizing the Line Height in the Mobile Menu: Primary > Font. This does lower the text under the widget to make it visible however results in all the links being spaced out too far from eachother (doesn't look good). Is there a way to make the Mobile Navigation Menu appear over this floating widget or to have all the navigation links in the hamburger menu start a few lines down? *Here is the widget code if needed: <script src="https://hotels.cloudbeds.com/widget/load/q4PLQx/float?newWindow=1"></script> Thank you!
  9. Hello! After changing my site from one language to billingual (DK/EN) manually with help from this blog: https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template, the font in my hamburger menu / dropdown menu is now black on some pages and white on others. I wish for it to be white all over / sitewide. Is this possible with som custom CSS? Thanks in advance πŸ™‚
  10. Hello, I was wondering if anyone could help me. I want to remove the "keep in touch with us" from the secondary navigation pages (i.e when i click on one of the main titles) but still keep it on the main menu. Or alternatively get the social icons and the text to stay together on all pages at the bottom of the page. Is there a code for either of these? The code i use for the custom text on the main menu is: .header-menu-nav-folder-content:after { content : 'KEEP IN TOUCH WITH US'; font-size: 13px; font-weight: normal; margin-left:18px; margin-top: 165px; margin-bottom: -20px; } any help would be greatly appreciated! πŸ™‚
  11. Hey there, I am trying to create a "forced hamburger" Menu, which I was able to do using a bit of CSS from another post. Now I am Trying to get the navigation into multiple columns. This is the menu we are trying to emulate from Onyx Coffee. We don't have as many Items but are looking to have 4 columns:
  12. I need to build the attached, and i'm not entirely sure of the best way to approach it. Essentially I need two menus, one that includes the following: Social icons Client review link request demo btn (email form) And a secondary hamburger menu that includes the rest of the site navigation. I guess what complicates this somewhat, is how this ends up being handled on a mobile? Really what needs to happen is the secondary hamburger menu on the desktop is binned on mobiles, and everything appears within a single default hamburger menu – if that makes sense? I appreciate from a UX POV this is sub optimal, but i've inherited the design and need to do my best to achieve this.
  13. Hi. I used some great code from this tutorial to make a hamburger menu on desktop. Suddenly, nothing happens when you click on the hamburger. I've used this code on multiple sites and none of them are work. I asked the developer if he changed the js at all. He got back to me and said he hadn't but was unable to help any further. Seeking any advice/guidance on how to fix this. I'm stumped. Thank you in advance!
  14. Hello, hoping you can help.... I'm working on my website, and I have problem with the hamburger menu on the mobile version. When you press on the hamburger menu it goes white with nothing on the page....I think the problem may be that my logo and my site navigation is white so they are not showing up. The links all work to the various pages that i have put on the footer. So my question is how can I change the background colour (preferably) of the hamburger menu or if not change the logo and font colour? I am on a personal plan so I can't put in code. If anyone could help that would be brilliant. Lou
  15. Hello! The hamburger Icon in the top right corner of my website has disappeared. I haven't changed any of my settings or added any CSS codes but the lines no longer appear on the mobile version of my site. The menu still appears when you tap the place the icon should be but there is no way for people to tell that there are more pages for them to explore. Please help! I have no idea how to fix this!
  16. Hi, I'm trying to get the Hamburger icon on the navigation bar to change to an X when hovering mouse over the menu and menu expands on desktop version (kind of like it does on the mobile version) I've tried a few css codes I found online but nothing working so far.. Anyone an idea how to do this? Website is https://pigeonhousedelgany.squarespace.com password: Peanuts Thank you, Annabelle
  17. Hi, I am using the code below to change the logo on the home page, however, the code effects the entire page so when i click the hamburger menu, the logo is white. I do not want that because it is not very visible. I want the logo to be white on the homepage but change back to black when you click on the hamburger menu like it does on the other pages. How can I do that? https://tlcdesign-sylvie.squarespace.com/home password: sylvie <style> .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://static1.squarespace.com/static/634facca9a1aa046ad910a6c/t/635193f56754c829ac99d578/1666290677453/172DB8AD-65EF-4986-BCF0-AEE53CCF6716.png); background-size: cover; background-repeat: no-repeat; background-position: center center; } </style>
  18. 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
  19. Hello! *This question is pertaining to the desktop version of my website* I am having issues moving my burger navigation from the right side of the screen to the left. I am looking to have the burger on the left side of the website, and then the logo in the middle or aligned right. I am unable to change either by adjusting the header layout thru SS's options on site styles. This pic is showing what I mean. I am also looking to create a burger nav that does not take up its own page. I am seeking to create something more like this from another church website. I'm not sure if I'm asking for too much out of Squarespace design wise but what's most important is the burger on the left. I've searched for hours on different websites and forums for solutions and tried numerous amounts of code in the CSS but haven't had any luck yet. This is the website name: https://test-lsgj.squarespace.com/
  20. Hello lovely angels of Squarespace forum (and superhero @tuanphan) I added a custom image for the hamburger and also made the mobile menu active for desktop view. It's working pretty well, I'm just having issues with the alignment and size. I want to icon to be relatively large (around 90 px wide), but on smaller screen and on mobile, the icon gets cut off. I can't figure out how to move the icons to the left a little so it doesn't get cut off. Website: https://www.crystalmind.design/ PW: happydog THANK YOU SO MUCH! - Chloe Here is the code I used: // CUSTOM HAMBURGER /* Non-active burger */ .burger-inner:after { content: ""; background-image: url(https://static1.squarespace.com/static/5ee903c7326ba435104d57a9/t/6362909e6596c42839983790/1667403934287/Hamburger.png); background-size: 100px; background-repeat: no-repeat; background-position: right; background-color: transparent !important; display: block; width: 100px; height: 60px; } .burger-inner>div { display: none !important; } /* Burger when active */ body.header--menu-open .burger-inner:after { background-image: url(https://static1.squarespace.com/static/5ee903c7326ba435104d57a9/t/6364ff46b118c16557fff23c/1667563334640/Hamburger_1.png) !important; }
  21. Hi! Please can someone help with custom code to force the cart icon to appear in the header in mobile view (so it's always visible), instead of in the hamburger menu (where no customer can find it seemingly). I think the template is Avenue, definitely a 7.0 template anyway! Thank you πŸ™‚
  22. As others have requested, I want to hide the hamburger menu so that mobile looks like desktop. I want the same two social icons at the top right as they are on desktop. Or at the very least push up the social icons to the middle of the page instead of them hanging at the bottom of the footer. It doesn't make sense UX wise to click a hamburger just to present two social icons on mobile. I noticed a message that says CSS can't be applied on the cover page so will this be a problem? I don't know why Squarespace doesn't have the option to keep desktop UI on mobile. Thanks
  23. Half of my menu items are not going into the hamburger icon on mobile view. It's messing with the cart as well, making it so that site visitors aren't always able to access their cart. Menu works normal on desktop view. I have some code targeting the menu but when I delete it the issue with the mobile view still persists. .
  24. Hello everyone, After searching through the forums for a solution I wasn't able to find any solutions to my problem. What I am looking for would be either to make the nav go into the hamburger as soon as the last item in my nav starts to get cut off or just to have the Hamburger menu visible the entire time. I have been trying to find solutions for either option but no css i have found online is working for me. I do not want the nav to stack either when the window size is reduced and i have also attached a picture of when the nav gets cut off. Website: https://coloradotinting.com/ as of right now the only code in there is for the nav not to wrap which is: nav.site-navigation { white-space: nowrap; } The codes that I have tried are below: @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; } } @media screen and (max-width: 5000px) { /* Display burger icon at all widths */ .header .header-burger { display: flex; order: 0 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Center logo in mobile device */ .header-title { text-align: center !important; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } } Thank you for the help.
  25. 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.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.