daniellemusarra
Member-
Posts
7 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by daniellemusarra
-
DIY announcement bar fixed instead of sticky
daniellemusarra replied to daniellemusarra's topic in Customize with code
Thank you so much, but now it only appears when I open the pop up menu. Do you know why this might be happening? Ideally I would like the scrolling announcement bar to appear only on the home page and be hidden when the menu opens up.- 3 replies
-
- announcement-bar
- footer
-
(and 2 more)
Tagged with:
-
Hi there I'm wondering if I could please get some help. I have created a DIY announcement bar using a footer section and I want it to be fixed at the top of the screen rather than being sticky/scroll down with the page. It's weird because it disappears behind the header and then reappears on the rest of the site. my site is: https://grouse-pepper-fl3e.squarespace.com/home PW: 123 this is the current code I have for the bar: /*Move footer scroll headline to header */ #footer-sections .page-section:nth-child(1) { position: fixed!important; top: 0!important; z-index:9 9!important; width: 100%!important; height: auto!important; } header,#page{ margin-top: 2rem!important } I've tried removing "position: fixed!important;" and trying a few different things but then the bar disappears all together. Any help is appreciated thank you!!
- 3 replies
-
- announcement-bar
- footer
-
(and 2 more)
Tagged with:
-
Hello! I'm trying to reposition my images on my carousel posts to overlap with the top of the card. I've just used this code on my site and it mostly works but the whole circle isn't showing (cut in half). I'm wondering if I could please get some help with this? my site is: https://grouse-pepper-fl3e.squarespace.com/home PW: 123 This is the code I currently have: /* testimonial */ .user-items-list-item-container[data-section-id="6620f888fb5a3200413e988f"] { .user-items-list-carousel__media-container { position: absolute; top: -100px; z-index: 999999; left: 50%; transform: translateX(-50%); } .user-items-list-carousel__gutter { overflow: visible; } li.user-items-list-carousel__slide { padding-top: 120px !important; }} body { overflow-x: hidden; } Thank you so much!!
-
Hello! I've just used this code on my site and it mostly works but the whole circle isn't showing (cut in half) in the testimonial section (middle of home page). I'm wondering if I could please get some help with this. TIA! my site is: https://grouse-pepper-fl3e.squarespace.com/home PW: 123 This is the code I currently have: /* testimonial */ .user-items-list-item-container[data-section-id="6620f888fb5a3200413e988f"] { .user-items-list-carousel__media-container { position: absolute; top: -100px; z-index: 999999; left: 50%; transform: translateX(-50%); } .user-items-list-carousel__gutter { overflow: visible; } li.user-items-list-carousel__slide { padding-top: 120px !important; }} body { overflow-x: hidden; }
-
Thank you!! This worked great. I'm now wondering if there's a way to remove the logo when the menu pops up and only have the cross? Is this possible? Appreciate your help!
- 4 replies
-
- hamburger-icon
- hamburger
-
(and 3 more)
Tagged with:
-
Hi there! I'm wondering if I could get some help - my hamburger icon is disappearing when I open my full screen menu. I used this tutorial to create the menu: https://community.elfsight.com/t/squarespace-custom-fullscreen-burger-menu/18276 but it seems like the open menu covers the exit symbol when opened. I'd like the exit icon to be on top of the open full screen menu. my site is: https://grouse-pepper-fl3e.squarespace.com/home PW: 123 Current CSS: //show burger icon// @media screen and (min-width:768px) { .header-burger { display: flex !important; justify-content: flex-start !important; z-index: 1 !important; } .header-nav { display: none; } .header-actions-action { display: none !important; } .header .header-announcement-bar-wrapper { padding-top: 40px !important; padding-bottom: 20px !important; } } @media screen and (min-width:768px) { /* Fix footer invisible behind page content */ footer.sections { z-index: 9999999 !important; } /* change footer 2 sections to 100% height and 50% width */ footer.sections section:nth-child(3), footer.sections section:nth-child(2) { width: 50%; height: 100vh; position: fixed; z-index: 9999; left: 0; } footer.sections section:nth-child(3) { left: 0; } /* move footer section 2 to right 50% */ footer.sections section:nth-child(2) { left: 50%; right: 0; } /* disable scroll when burger menu is open */ .header-burger--open body { overflow: hidden; } /* effect on 2 sections when click burger menu */ body footer.sections section:nth-child(3), body footer.sections section:nth-child(2) { transition: transform 1.2s ease; top: 32px !important; } body footer.sections section:nth-child(3) { transform: translateY(-150%); transition: transform 0.75s ease; } body footer.sections section:nth-child(2) { transform: translateY(150%); transition: transform 0.75s ease; } body.header--menu-open footer.sections section:nth-child(3) { transform: translateY(-0%); transition: transform 0.75s ease; } body.header--menu-open footer.sections section:nth-child(2) { transform: translateY(0%); transition: transform 0.75s ease; } } Any help would be much appreciated thank you!!
- 4 replies
-
- hamburger-icon
- hamburger
-
(and 3 more)
Tagged with: