Jump to content

Search the Community

Showing results for tags 'hamburger-icon'.

  • 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


  • Events Calendar

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. 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
  2. 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>
  3. 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; }
  4. PW: flagrant I just need another developer to help me see what I am not seeing. I am trying to add css to force the nav menu into a hamburger for desktop too, but for some reason it's on the left side of the logo? I think I just need another set of eyes on this to help me figure out whats happening. I want it on the far right side instead of the far left. This is the code I'm adding in, it's worked for me in the past but for some reason now it's not: .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;} Thank you to anyone who gets a second to look.
  5. Hey! I'm using the new Squarespace 7.1 and am having some troubles finding any info on making the nav break at a certain point to enable the mobile hamburger icon for desktop. I don't want their typical nav for desktop, just wanting to have the hamburger icon across all devices. Thanks for any help! https://chameleon-porcupine-c7jc.squarespace.com/ password: 1234
  6. Site URL: https://www.voegelino.com/ Hi there I would like to change the hamburger menu icon into the text MENU. Any idea? I have a quite complicated set up with this menu and don't want to destroy anyting. Could anyone please help me? https://www.voegelino.com/ PW: orneverornow Attached you can find the custom code that is in the CSS. Thanks! Sibylle
  7. Site URL: https://www.waborihousetattoo.com.au/ Hey Guys, I'm having issues with the hamburger menu on mobile. I'm using an iPhone 11. After scroll the hamburger icon becomes un clickable..but only sometimes. I can’t pin point what is triggering this to stop working as sometimes you tap it and it opens, other times I tap it and nothing happens. Have tried to inspect on Chrome to see if something is overlapping it - can't find the issue. Is this a known issue? Any ideas? https://www.waborihousetattoo.com.au/ Thanks
  8. Site URL: https://www.nw-modern.com Hey everyone - brand new to this and working on a website for someone else. I am seeking the complete code to have my dropdown menu have the hamburger menu instead of "menu" as a title. I learned how to code using R and RStudio years ago, but I'm unfamiliar with CSS. If someone could provide a full script, I'd appreciate it! Thank you!
  9. I want to remove the hamburger menu icon on the mobile viewing, so having the header with only the logo. I'm adding the following code but it merger the header with the image that's supposed to be displayed under. I just want to remove the hamburger icon. <style> /* Hide burger */ button.Mobile-bar-menu { visibility: hidden }
  10. Site URL: https://www.rethinkhomes.com/ I have not done any edits or changes on this site for several months. But yesterday I went on to check why a client had not been able to find our social media icons. I discovered that our header and footer were missing. At first I thought it might be a custom CSS or code injection of some kind that stopped working. But after checking all places where I could have injected code, they were all empty. The only way I was able to even take screen shots of the header menu bar was by adding "safe" to the end of my SS site editing page URL https://rhombus-mandolin-jdrl.squarespace.com/config/safe and disable scripts. Can anyone help me figure out what has gone wrong.
  11. Site URL: https://www.reachnaz.com I need my hamburger menu to be white. It is currently black. This is the code that I am using for the menu. What do I need to change or add to make the menu white and not black. .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 100; 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: 20px!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; } }
  12. Site URL: https://numomo.com/ Hi, I am setting up new site. The mobile view shows a default hamburger (or +) icon for the collapsed menu on mobile. Since the entire page is only a single page without no additional pages, no mobile menu is needed. I want to a) get rid of the mobile menu logo (the hamburger or +), and replace it with two social media icons, i.e. the Twitter and Instagram icons (just like on the desktop view). How can I do that?
  13. 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:
  14. Hello everyone, Can you please advise on how to force the mobile menu on a desktop? I am new to squarespace and trying to keep the hamburger menu on with all screen sizes. I'm using version 7.1 - and all online resources are based on a previous versions were you can edit mobile settings that are not available anymore. It would be great if you can suggest any tips or custom code. website: tarpon-reed-27ss.squarespace.com password: 1234 many thanks, Dario
  15. 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!
  16. 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!
  17. Site URL: https://www.tinanairpics.com/contact Hello, I'm trying to figure out how to make a mobile-view hamburger icon change from white to black on a particular page of a website. I've currently injected the following code into that particular page's header, to make the hamburger appear white on the pre-clicked version, as the page background itself is dark (unlike the rest of the pages on the site): <style> a.icon-hamburger::before { -webkit-filter: invert(100%); filter: invert(100%); } </style> That works fine, but once I click on the hamburger icon to see the menu listing, the hamburger itself becomes barely visible as it stays white, while the menu background also becomes white. I've attached screenshots of the before and after. The template is forte, Squarespace 7.0. Thanks in advance to anyone who can help! πŸ™‚
  18. 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/
  19. Hello! I'm using the Moksha template and have tried all of the CSS I can find with no change whatsoever. Has anyone changed the hamburger menu in this template.... on the left hand side to words or even just add the word MENU? Help please! Signed: Why can't my client just deal with the hamburger menu???
  20. Site URL: https://www.thecollective-academy.com/ Hi Hivemind, We are helping a client migrate from 7.0 to 7.1 while keeping as many of the same stylings as possible. The 7.0 template they are currently using is "Ready" (you will see functionality on the live site:https://www.thecollective-academy.com/) We are hoping to recreate the navigation style on their 7.1 site, but cannot find the right CSS to customize the changes. Would any one have any direction to share how we could possible accomplish this? Any help is appreciated!
  21. Site URL: https://pitto.squarespace.com/ Could you assist in reducing the size of the + hamburger symbol on mobile. Thank you.
  22. Site URL: https://www.robin-lyons.com/work/smirnoff Hello, I am trying to make my hamburger menu appear black on just the mobile page https://www.robin-lyons.com/work/smirnoff without effecting how the site header looks on the rest of the site. I have managed to make this black on my other mobile 'work' pages, for example https://www.robin-lyons.com/work/her-home-advantage using the code body#item-618d19fdcd79e33780a7b906 #header{background-color: #FFF !important;} body#item-618d19fdcd79e33780a7b906 #header a {color: #111 !important;} but for some reason this code doesn't seem to work on https://www.robin-lyons.com/work/smirnoff even if for example I use the code body#item-61533729f737a7012e2f7d80 #header{background-color: #FFF !important;} body#item-61533729f737a7012e2f7d80 #header a {color: #111 !important;} Any help would be most appreciated. Cheers, Robin.
  23. Site URL: https://www.bodyarch.com/ Hi, I'd love to replace my text navigation with a hamburger three line icon that displays on desktop (next to the social media icons, and Book Now). Can someone please share the CSS and what i would need to do to make my navigation titles connect to the hamburger icon? Thanks so much for your help!! Best, Louis
  24. Site URL: https://www.madorra.com Hi everyone, I'd like to know if there is custom css I can use to avoid the need to "double click" my dropdown "menu" folder on mobile to see the options - see screenshots for reference. On desktop I just have the "menu", when I hover over it you see the different areas of the page that you can smooth scroll to. On mobile, you need to click the hamburger icon, which THEN brings you to the "menu" overlay THEN you need to click into that to see the options. Anyway around this?
  25. 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
  • 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.