Jump to content

Elise__

Member
  • Posts

    20
  • Joined

  • Last visited

Everything posted by Elise__

  1. Thanks a lot for this. One more thing however, since I have a 'scroll back' header option the language switcher doesn't show when I open the mobile menu from another section (it only shows when the menu is opened from the first section). How can I make the language switcher always appear in the mobile menu?
  2. Site URL: https://bear-clarinet-ghhl.squarespace.com/ Hi all, I set up a language switcher for my site using the bradgood tutorial. However I am stuck with the styling for mobile view. As the language switcher is overlapping my mobile site title, I want to remove it when the mobile menu is closed, and that the switcher only appears when the mobile menu is open. Can someone help me to remove the switcher when the mobile menu is closed? password: elise @media @mobile { .language { color: #fff; opacity:1; position: absolute; top: 1.5em; right: 7.5em; z-index: 99999; font-weight: 100px; font-size: 1.2em; font-family: 'p22-underground'; a { color: hsl(23,37%,95%); &:hover { opacity: 0.8; } } } }
  3. Can you also slow the acceleration speed slightly at some sections like in the example website? (http://robinmastromarino.com/)
  4. Site URL: https://carillon-ray-wbbm.squarespace.com/ Hello everyone, For my site I would like that when I hover on one of the navigation links, that all the other navigation links become darker. So that the one that I hover on stands out. password: elise Many thanks in advance, Elise
  5. Hi @tuanphan, Could you still help with this?
  6. Hi @tuanphan, oh oops! I duplicated the website. You can see it here: https://buttercup-mushroom-ee3n.squarespace.com/ password: elise How should I adjust the overlay so that it is behind the title?
  7. Hi @bangank36, Do you maybe have a clue on how I can bring the text in front of the overlay? Kind regards, Elise
  8. Site URL: https://mandarin-violin-mjw7.squarespace.com/ Hello everyone, I have an overlay for my background on the home page. However the title and text is disappearing behind the overlay. How do I adjust the site so that the overlay is behind the text? password: elise Many thanks in advance. /**** HOMEPAGE ****/ /* Section 1 */ /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .section-background .section-background-overlay {width:100%; opacity: 100%! important; background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)); z-index: 1;} /* Header gradient */ .header-announcement-bar-wrapper.black, {width:100%; opacity: 100%! important; background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)); z-index: 1;}
  9. Hi @bangank36, thank you for your reply. I implemented it, but I have a question How do I manage to have the background overlay behind the text? As you can see some of the text is disappearing behind the overlay. Thank you
  10. Site URL: https://mandarin-violin-mjw7.squarespace.com password: elise Dear squarespace community, I have animated underline for my navigation links. However the space between the underline and the link is quite big. How do I reduce the space so that the underline is directly below the navigation link? This is the code I use: /* navigation underline animation */ .header-nav-item::after { content: ''; background: #FFFFFF; //color height: 2px; //thickness width: 0; display: block; margin-top: 1px !important; transition: width 0.5s; //animation speed margin: 0 auto; } .header-nav-item:hover::after { width: 100%; } .header-nav-item--active a { background-image: none !important; }
  11. Site URL: https://mandarin-violin-mjw7.squarespace.com/ Dear squarespace community, I would like a wrapper around my background image. I want it to depend on the background image, and not the content. Password: elise Many thanks! This is the code I use now: /**** HOMEPAGE ****/ /* Section 1 */ /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .content-wrapper {width:100%!important; background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)); z-index: 1;} /* Header gradient */ .header-announcement-bar-wrapper.black, header#header { background: linear-gradient(to right, rgb(216, 188, 171), rgba(0,0,0,0), rgba(0,0,0,0)) !important; } @media @mobile { /* Section 1 gradient */ section[data-section-id="60ef53636ebc0620d8effd57"] .content-wrapper {width:100%!important; background: linear-gradient(to right , rgb(216, 188, 171),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0), rgb(216, 188, 171)); z-index: 1;} /* Header gradient */ .header-announcement-bar-wrapper.black, header#header { background: linear-gradient(to right , rgb(216, 188, 171),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0), rgb(216, 188, 171))!important; } }
  12. Dear @tuanphan, Thank you for your reply 🙂 I tried your code, however the effect is not what I had in mind . I managed to come close with the code below (see also my site). However I still face two problems; 1. The underline under the navigation is quite far from the title. How do I decrease this distance so that the underline is directly under the title ? 2. For the mobile navigation, the animation takes the entire mobile screen. How can I adjust it so that it only underlines the title? /* navigation underline animation */ .header-nav-item::after { content: ''; background: #FFFFFF; //color height: 2px; //thickness width: 0; display: block; margin-top: 0px !important; transition: width 0.5s; //animation speed margin: 0 auto; } .header-nav-item:hover::after { width: 100%; } .header-nav-item--active a { background-image: none !important; } /* mobile navigation underline animation */ .header-menu-nav-item::after { content: ''; background: #FFFFFF; //color height: 2px; //thickness width: 0; display: block; margin-top: 5px !important; transition: width 0.5s; //animation speed margin: 0.6 auto; } .header-menu-nav-item:hover::after { width: 100%; } .header-menu-nav-item--active a { background-image: none !important; }
  13. Dear Tuanphan, How can I adjust this code so that the underline is closer to the navigation title ?
  14. Site URL: https://mandarin-violin-mjw7.squarespace.com Dear Squarespace community, For my site I wish to have an animated underline that differs for Mobile and Desktop. For Mobile I would like an underline that goes from left to right on hover. For Desktop I would like an underline that goes outwards from the centre. https://mandarin-violin-mjw7.squarespace.com/config/ the password is: elise Does someone have css code to realize this? Warmly, Elise
  15. Dear Creedon, Thank you for this addition. I am very happy with the result, thank you for your help.
  16. It works! Thanks! 🙂 I would only like to 'soften' the effect a bit. I have tried doing this by including a 'fade' animation. I have inserted this under the 'reveal menu items' section. However, now the fade animation is applied to all the navigation links as a whole, whereas I would like the navigation titles to fade-in one by one as they appear. Do you have a suggestion where I should include the animation to address the navigation titles individually? // reveal menu items .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) { @iterations : 32; .header-menu-nav-item { visibility : hidden; } .header--menu-open .header-menu-nav-item { visibility : visible; animation: fadeIn ease 5s; -webkit-animation: fadeIn ease 5s; .fade-in { animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 10s; -moz-animation: fadeIn ease 10s; -o-animation: fadeIn ease 10s; -ms-animation: fadeIn ease 10s; } @keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}} @-moz-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}} @-webkit-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}} @-o-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}} @-ms-keyframes fadeIn {0% { opacity:0;}100% {opacity:1;}}
  17. Dear Creedon, Thanks a lot! Exactly what I had in mind. Is it maybe also possible to have the whole plane slide in? For example on squarespace.com when you click on the burger the menu slides in from the right like a square. Here you also see the reveal effect of the navigation titles that I had in mind. Maybe @tuanphan has an idea in how to do make the mobile navigation titles reveal from top to bottom? 🙂
  18. Hi Creedon, Thank you for your quick response. https://mandarin-violin-mjw7.squarespace.com/config/ password: elise I also noted that the 'contact' button seems to slide from the left corner, whereas the text slides from the left. Is it possible to make the button also slide from the left? Is it also possible to make the navigation titles on the mobile menu appear from top to bottom when the menu slides at the same time? Thanks in advance, Elise
  19. Hi! I really like the code. I was wondering how I can adjust it so it also slides back? It slides open when I click on the menu, but it does not slide back. Thanks!
×
×
  • 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.