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

Search the Community

Showing results for tags 'mobile header'.

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




Expert ID

Found 6 results

  1. Site URL: https://www.inkblotastrology.com/ Hello! My 7.1 website is just one page (the home page) so I hid the mobile hamburger menu using some code. But the issue now is I think the hamburger is still technically there taking up space or something because the header is too wide for mobile now; the whole site doesn't stay centered because the header width is too long with my logo at the size it's at with the hidden hamburger menu. I attached a video to show what I mean. This wouldn't be an issue if Squarespace allowed us to remove the mobile menu, but they don't yet, so it's gonna have to be code. Is there some kind of code that can help my mobile site stay put/centered without scrolling to the right? P.S. I tried finding code to make the hamburger smaller, but none of the code I found worked, or at least it didn't fix this specific problem. Website is inkblotastrology.com Thank you! RPReplay_Final1600279587.mov
  2. Site URL: https://corn-blue-m4pz.squarespace.com/ I'm using a code I found here to make the mobile header transparent. I have two problems I'd like to fix: -Make the banner image stretch all the way to the top (logo size pushes the banner down after a certain size) -Make the banner image stretch all the way to the bottom of the screen when you first open the website/page I attached what it looks like right now PW: squarespacehelp Thanks!!
  3. Site URL: https://www.birdmafia.com Site URL: https://www.birdmafia.com All, looking for ideas on what options I have to make the mobile header better. Everything looks great on desktop, but in mobile it makes the social icons hidden until you hit the "..." icon, and it has the shopping bag further over to the left for no apparent reason. Any ideas on how to make social icons show on top with shopping bag instead of hidden by "..." or if not an option at all then how to hide the social icons on mobile. Those are the two ideas I had. Let me know what you think. I have this code in to resize the mobile social icons, I tried making them even smaller - it never moved them to top. Just smaller to see once you hit the "..." //social icon resize in mobile// @media screen and (max-width:768px) { .tweak-show-social-in-header .mobile-social .sqs-template-social-icons .sqs-svg-icon--wrapper { width: 30px; } }
  4. Site URL: https://superhero-mth.squarespace.com Hi there, I'm trying to make the header of my site viewable ONLY on mobile. I'm currently using this code to hide the header: header { display: none; } The header I've designed for the main page won't function on mobile, so I'd like to show the header/menu for the mobile version. How can I do that? Any insight would be helpful. Password: SuperheroProject Thanks, -Michael
  5. 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
  6. Site URL: https://plane-tunny-45nr.squarespace.com/ https://plane-tunny-45nr.squarespace.com/ password=test Hello! I am very happy with the way my site looks until I view it on mobile- the header looks awful on mobile but unfortunately the brine theme does not allow disabling of mobile styles How can I make the mobile site render as close to the desktop version as possible? I have the personal plan so cannot do injected CSS, only custom CSS via the design menu I would be interested in completely avoiding all mobile re-styling if possible- but if this is not possible I would like to make the mobile navigation render as close to the desktop navigation as possible I have tried to use the following code to bring the logo and header down to overlap with the banner but it does not seem to work- can anyone recommend code or any other solutions to bring the header down to overlap with the banner? Also would LOVE to find a way to make the rest of the navigation render the same way it does on desktop ie. the boxes that say CONTACT, TEXTS, ARCHIVE rather than having to click into the menus /*Custom CSS Code for Brine Template – by mcdigitaldesign.com.au*/ /*Mobile Header Bar – Sit Over Banner Image*/ .Mobile-bar-branding { z-index:3 !important;} .Mobile-bar-branding {position:absolute;} .Mobile-bar-menu { z-index:3; padding-top: 60px; } .Mobile-bar { position:absolute; } /*Mobile Header Bar – Padding*/ .has-logo-image .Mobile-bar-branding { line-height: 0; padding-top: 60px; } /*Mobile Bottom Bar – fixed*/ .Mobile-bar–bottom { position: fixed !important; } /*Mobile Banner Content – Padding*/ @media only screen and (max-width: 1060px) { .Intro-content { padding-top: 150px !Important; } }
  • Create New...