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

Search the Community

Showing results for tags 'mobilemenu'.

More search options

  • 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
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Found 26 results

  1. Site URL: https://embersoultarot.com Right now the burger menu is on the right and over lapping with the shopping cart. I've been trying to figure out how to move the burger icon to the left of the screen, and then push the logo to the center. Any ideas are appreciated! Thanks!
  2. There was a new update today on the mobile design of my website. Previously, the logo was centered at the top of the page with the shopping cart logo to the right and menu label to the left. Now the logo is on the left and menu and cart are both on the right. Is there a way to revert back? It is very disappointing as I have been working with initial aesthetic. It is a drastic change should be been optional.
  3. Site URL: https://www.risd.edu/ Hi Everyone! I'm looking to customize the mobile menu for our website. I would really be grateful if someone could help me understand what needs to be done to do a custom mobile menu like the one below. I'm completely new to this, so any advice you can give me would be so awesome!
  4. Site URL: https://www.interiorsbyhonor.com/ My client is after the logo to be in the center when viewing on mobile. I have no idea how to get this to work.... suggestions
  5. Site URL: https://bat-dahlia-6hpc.squarespace.com/config/ I am wanting to have a search bar in my mobile navigation dropdown menu. Is this possible?
  6. Site URL: https://bat-dahlia-6hpc.squarespace.com/config/ The text size in the mobile navigation menu isn't small enough. if possible I would like them 10PX small just for the navigation menu. can you help?
  7. Hi, I'm looking to add my site logo into my mobile menu overlay and make this a clickable item (so it goes to the homepage). I think I'm halfway there, but I can't work out what I need to do next. Or is there a better way? I've used tuanphan's code snippet, from below, like so... nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary:after { display: block; content: "Text"; } nav.Mobile-overlay-nav.Mobile-overlay-nav--primary:before { display: block; content: ""; background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/sonora-squarespace.jpg); width: 200px; height: 200px; margin: 0 auto; } to get the logo into the top of my menu, but can't work out how or where to add in the part that will make it a link. I'm thinking this needs to be added into a code injection somewhere as html, but not quite sure and feeling a bit stuck. I've got my code working like so... How do I add a linking image in there? - maybe javascript or something? Can anyone help at all? Thanks
  8. Site URL: http://www.jessicawisemanphotography.com Hi, I am having a lot of trouble with the mobile version of my homepage. I had previous help on here with some code to get my logo large enough for the web version as well as to have to colour white on the home page and black on all other pages which all worked perfectly for the web version. However, the code has been applied to the mobile version too and the logo is simply too big for the mobile version. This is the code I have used so far...... .header-title-logo img { max-height: 3000px; max-width: 500px; } .homepage .header-title-logo img {filter: invert(1);} As you can see from the attached photos below the logo overlaps my page links and doesn't fit in the space. It would be nice to have it a bit smaller to fit and not overlapping. Im not sure if this is possible but I would also love the drop down menu to be higher, more towards the top corner of the page rather than on the side half way down. But honestly that isn't the ain priority right now. Any help would be appreciated! Thank you!! @tuanphan
  9. Site URL: https://photoguy.com Hello. I did search but didn't find my answer in regards to 7.1 navigation menu as the screen is reduced for smaller devices. In wordpress I was able to adjust the cutoff parameter for the screen size reduction for mobile devices. With my Squarespace 7.1 site, as the screen width is reduced, the header navigation starts to create a second line....which looks terrible. I attached an image to help explain my situation. Is there CSS or a setting that I may have missed in the Squarespace settings? Thanks.
  10. Hello! I was wondering if it was possible to have a mobile sidebar menu? I prefer this style over the default mobile menu on 7.1. I’ve tried researching a plugin for this but I haven’t had any luck so far. I know Shopify offers this option on their app but Squarespace doesn’t. I’ve attached examples of what I would like! Please help, any assistance or recommendations would be appreciated.
  11. Site URL: https://www.birdmafia.com I've tried a ton of code on this site already, but finding none that works to change the background color of the hamburger menu.... I'd like to make it a light grey. If there is any known code, maybe adding that text is black as well (so I can change the color code in future if I'd like to.) website: birdmafia.com
  12. Site URL: https://bit.ly/2ZFsjdq Hi, Activating the mobile menu shoves the banner image below the announcement bar and leaves white space. This is not visible in the mobile view in my Squarespace dashboard so not sure how to target this. Also, something that might be related but without the menu active--scrolling reveals a black space after the mobile information bar disappears between banner and first section. Any help is appreciated.
  13. hey, does anyone know how to make the font smaller on the drop down menu on mobile version? also for the mobile version, the home page is high up into the header. how do i bring this down? thank you 🙂
  14. Site URL: http://endpaperstudio.com/ I'm looking to add a custom font for the mobile nav of our Avenue template. I've tried a couple of different ways but have had no luck. I'm wondering if anyone out there has had any luck with this. Thanks in advance!
  15. Hey there! I was wondering how would I change the colour of this little icon, or upload my own? I'm using the Classon template. Thanks in advance!
  16. Site URL: https://www.stricklandsmartialarts.com/ Hi team, I need help with the Mobile Information Bar on 7.1 template, please. It covers our Special Offer button when the mobile menu is tapped. Is there a way to have the Bar visible when browsing the page but when you tap the menu it would dissapear? See attached image to see what it does. Thank you for any guidance.
  17. Site URL: http://LAwellness.com The bottom of my mobile dropdown menu gets obscured by the mobile information bar. Is there a workaround for this? I know very little about CSS. I tried the following, but it put a margin after every menu item, not just the bottom of the menu. .header-menu-nav a { margin-bottom: 70px; }
  18. Site URL: https://robertmango.com/ Hi, the site displays an unfriendly drop down menu on mobile. I want to change it to a hamburger menu which will display menu separate from the site pages. For instance, a menu like this: Is there any way to customize with CSS code? I am unable to use template menu. Thank you so much in advance.
  19. Site URL: https://julehjaelpen.dk/ Hello I've been trying to edit the background color of the website Julehjælpen.dk. I have tried several times to come around this background color. But every new section or site I add, are always with black background. When I am trying to add sections from templates in Squarespace, the text fields are also black. They should just be white. But when I select a white background, the mobile menu disappears because my links in the header are white. I would appreciate if someone could help me. Thank you very much.
  20. Site URL: https://julehjaelpen.dk/ Hi Squarespace The white links are not visible on mobile menu. Because the background is white. How can I customized the links to be black - but only on mobile view? Best, Marianne
  21. Site URL: https://gopher-mackerel-pen5.squarespace.com/ Hello SS brains trust, Fixing up a few things on a clients site built by another designer and need some help with nav for mobile & tablet... Nav menu is fixed and working perfectly on homepage, though when I navigate to the Team and Contact pages, it's not visible at all. Any ideas how to fix this? It is already using custom CSS for the mobile nav, but I don't have the technical knowledge to figure it out myself. site is: https://gopher-mackerel-pen5.squarespace.com/ pw: HIP2020! Appreciate your help in advance. Muchas gracias. RAD.
  22. Site URL: https://www.jasco.com/ I added a Notification bar to my site, and styled the layout a bit with custom CSS. Now on mobile view, the menu icon is missing (see 1st attachment). I can still click the bar to show the menu, but this is not obvious to the user now that the icon is missing.Once I dismiss the notification bar, the icon returns (see 2nd attachment). Did I do something wrong, or has anyone else encountered this bug?
  23. Site URL: https://www.michellegonzalezphotos.com/ Implemented a custom mobile navigation menu, and for some reason on mobile screens, a fixed header is appearing OVER the mobile navigation menu. Been racking my brain for hours on what could be causing this issue. Doesn't appear in the mobile screen in the Squarespace backend, but does when testing on actual phone. Which makes it difficult to target the element itself in the Inspect window. Reckon I may need to adjust the z-index of an element? Not sure if I have another element that could be causing the issue, but I've looked at everything and can't seem to figure this out. Any help would be greatly appreciated! Also happy to provide any other info that you feel would be helpful. Code used to implement a fixed header & to change on scroll here: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(window).on("scroll", function() { if($(window).scrollTop() > 400) { $(".Header").addClass("on-scroll"); } else { $(".Header").removeClass("on-scroll"); } }); </script> .Header{ background-color: transparent; width: 100%; position: fixed!important; transition: 0.2s all linear; -webkit-transition:background-color .4s; -moz-transition:background-color .4s; transition:background-color .4s; z-index: 999; } .on-scroll{ background-color: #e6dcd1!important; z-index: 999; } .on-scroll .Header-nav-item{ color: #000!important; } .Header-inner--bottom { padding-bottom: 20px; } .on-scroll .Header-branding-logo { visibility: hidden; } .on-scroll .Header-branding { background-image: url(https://static1.squarespace.com/static/5a47c003c027d80d1f85c73d/t/5e88a47dc8efd76b478354ac/1586013309515/primary-logo-black.png); background-size: contain; background-repeat: no-repeat; background-position: center center; transition: .4s; width: 220px; } Code used for custom mobile navigation menu here: ///Mobile Overlay/// //mobile .Mobile-overlay-nav-item { text-align: center; } .Mobile-overlay-menu { background-image: url(https://static1.squarespace.com/static/5a47c003c027d80d1f85c73d/t/5e91ced3cfe71128e10e1bcb/1586613973454/Venice+Italy+Wedding+Anniversary+Photography+Session-+Destination+Italy+Wedding+Photographer+-+Michelle+Gonzalez+Photography+-109+%281%29.jpg); background-color: #f5deb3; background-position: center; background-repeat: no-repeat; background-size: cover; width: 100vw !important; } .Mobile-overlay-close { z-index: 999; background:transparent !important; } .Mobile-overlay-nav--primary { padding-top:60px; } .mobileLogo { width: 190px; margin-top: -20px; } //mobile branding logo// @media only screen and (max-width: 640px) { .Mobile-bar-branding { -webkit-filter: invert(100%) !important; filter: invert(100%) !important; filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); }} //Add this to disable logo on desktop @media screen and (min-width:760px) { .mobileLogo { display:none; } .Header-nav--primary .Header-nav-item:nth-child(1) { display:none !important; } } .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child { padding-top: 0em !important; } .Mobile-overlay-folder-item { text-align: center !important; padding-top:20px; font-family: 'Danmark Medium';//change as necessary } .Mobile-overlay-folder { padding-top:100px; } .Mobile-overlay-folder-item--toggle-label { font-family: 'Danmark Medium'; } //Add this to disable logo on desktop @media screen and (min-width:760px) { .mobileLogo { display:none; } .Header-nav--primary .Header-nav-item:nth-child(1) { display:none !important; } } .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child { padding-top: 0em !important; } .Mobile-overlay-folder-item { text-align: center !important; padding-top:20px; font-family: 'Danmark Medium';//change as necessary } .Mobile-overlay-folder { padding-top:100px; } .Mobile-overlay-folder-item--toggle-label { font-family: 'Danmark Medium'; } The image of what the issue looks like on a mobile screen is attached. I've also attached a screen recording of the issue. Hopefully someone can help me narrow this down! RPReplay_Final1586874343 2.MP4
  24. Hello, I'm working on my new website and I've got my own little thing that I want as a mobile hamburger menu icon. My problem is it does not center in the bounding box (term?), how do I fix this? Image for reference: Icon image adress: https://i.imgur.com/DcVdG9q.png CODE I'm using right now: .burger-inner:after { content: ""; background-image: url(https://i.imgur.com/DcVdG9q.png); background-size: contain; background-repeat: no-repeat; background-position: left; background-color: transparent !important; display: block; width: 30px; height: 30px; } .burger-inner:before {display:none;} Thanks before hand, John
  25. Site URL: https://www.carlostberg.com/ Hi there, I'm hoping someone can help me adjust the menu size on mobile view. I'd like it to be around 50% of what it currently is. If it helps I'm using the template Jasper. I've attached a screencap of how it appears on mobile. Also, ideally the menu wouldn't interfere with the 'floating' logo - however, I'll take what I can get ha ha. Thank you in advance to anyone that can help!
  • Create New...