moonlitdesign

2 hours ago, tuanphan said:

I see it already overlap image here

@tuanphan yeah so i'd like the logo to be sticky, and then the image to completely scroll up above the logo until the image disappears, then the logo shrinks down !

8 minutes ago, Beyondspace said:

Try the following Custom Css code

.newsletter-block .newsletter-form-field-wrapper {
  min-width: unset;
}

My testing

thank you so much worked perfectly

12 minutes ago, Beyondspace said:

Do you mean this block?

I check that it is fine now. Have you figured it out?

Hi there, i have a float newsletter block at the bottom of my homepage, i have reduced the width / length / size of the form fields, but now i am left with a large padding / margin / gap / distance between each field. 

is there a way to reduce / decrease this so it's like a 5px gap ?

thanks! 

 www.moonlitdesign.uk/home-old

3 hours ago, tuanphan said:

You can add code to Homepage Header Code Injection, instead of Sitewide Code Injection Footer

With Mobile, change code to this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 800;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('test-something');
        }
        else {
            $('header#header').removeClass('test-something');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .header-display-mobile img {
    opacity: 0 !important;
}
header#header.test-something .header-display-mobile img {
    opacity: 1 !important;
}
</style>

 

Thank you so much you're incredible!!

out of interest, do you know how to delay the transition of the large moonlit logo image on the homepage? i would like the image to overlap it on scroll first before transitioning away. not essential but i tried a few things with no luck! 

www.moonlitdesign.uk/home-old

#block-yui_3_17_2_1_1710265456616_12284

Hi @tuanphan you've solved this for me on another thread, thank you so much you're incredible 🙂

1 hour ago, tuanphan said:

You mean change transition 0.3s or change number 100 on mobile?

exactly that, i wasn't sure how to wrap this in a 'mobile only' code when its in code injection. thank you!

35 minutes ago, tuanphan said:

Can you share code you used for desktop?

it is in the individual home page > advanced > code injection

<script>
  $(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > 100){
    $('header#header').addClass('scrollNav');
  }
  else{
    $('header#header').removeClass('scrollNav');
  }
    
});
</script>
<style>
  
  
  header#header img {
    opacity: 0;
    transition: all 0.3s;
}
  
  
.scrollNav img {
    opacity: 1 !important;
    transition: all 0.3s;
}
  
  

  
</style>

35 minutes ago, tuanphan said:

I see you figured it out?

https://www.moonlitdesign.uk/selected-works

yes i did thank you! it turns out on one of the type writer effect code blocks, had the code:

.container { justify-content:center;} etc.

and it was affecting the menu, so i just deleted the code block and replaced for static text.

5 hours ago, Web_Solutions said:

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.blog-basic-grid .image-wrapper img {
    left: 0 !important;
    top: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

 

 

thank you so much, really appreciate your help worked perfectly!!!

On 4/13/2024 at 9:15 AM, tuanphan said:

Can you share link to a portfolio sub page?

www.moonlitdesign.uk/portfolio/fortheloved-photography

On 4/13/2024 at 8:59 AM, tuanphan said:

The page doesn't work

www.moonlitdesign.uk/portfolio/fortheloved-photography

On 4/13/2024 at 8:56 AM, tuanphan said:

What should it look like? I tried checking some pages but all are same

https://www.moonlitdesign.uk/enquire

https://www.moonlitdesign.uk/home-old

thank you for this, i ended up taking the code out and just left it as normal text 🙂

On 4/13/2024 at 8:56 AM, tuanphan said:

Add this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 800;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('test-something');
        }
        else {
            $('header#header').removeClass('test-something');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  header#header img {
    opacity: 0 !important;
}
header#header.test-something img {
    opacity: 1 !important;
}
</style>

 

thank you so much! is there a way to change the code to only happen on the homepage, and only on mobile? 

On 4/12/2024 at 4:32 PM, Web_Solutions said:

What is the website URL?

www.moonlitdesign.uk/blog

Hey, i'm looking to set a time delay on the mobile header sticky nav logo.

on the homepage only, i would love it to enter / transition in when you hit the second section of the homepage.

i.e the 'guiding soulful wedding creatives..' bit, once you've scrolled past the big main sticky logo image. 

i believe i've got it to do this on desktop, but i need a different time set for mobile, is this possible? i believe its a @tuanphan bit of code i originally used in home settings > advanced > code injection

www.moonlitdesign.uk/home-old

Hey @tuanphan i can't believe it my menu has broken again some how hahah!!!

the thing is it works perfectly when opening it from content pages, so it's something on the homepage that is messing with it. 

would love to know any insights you have on this.

I feel like there must be some code that i need to wrap in a desktop media query, but i have no idea which one. 

www.moonlitdesign.uk/blog

hey im having issues with the padding of my blog grid images. I tried to add a border with 8px padding but it is affecting the alignment of the image. i have tried margin auto etc but not working!

thanks

hey, on my portfolio sub pages, the 'next' portfolio page pagination buttons are showing on the right of the screen.

is it possible to move this to the top of the page instead, so it runs full width and doesn't interfere with the page layout. 

i'm trying to do the same @tuanphan but above code isn't working for me 🙂

7.1 fluid engine, portfolio sub pages

www.moonlitdesign.uk/portfolio-1/fortheloved-photography

Hi there, not sure what or why, but for some reason my type writer text effect that is in the footer has stopped working but only on the homepage. is there an obvious obstruction here that i'm missing? the homepage is the only page where there is also another type writer text effect code block on the landing page, so i'm assuming it's that but i don't know why!

www.moonlitdesign.uk/home-old

-bottom left on footer: • serving internationally 

thank you 🙂

@tuanphan hey ! i've used some of your code that i've found around on the forum to try and create a header shrinking effect. i'm not super happy with desktop but i can live with it. on mobile however, i'd really like help with the following:

- i'm wondering if there is a way to delay the shrink nav logo appearing until you have scrolled to the second section of my homepage only on mobile! 

www.moonlitdesign.uk/home-old

fingers crossed and thank you!!!

8 hours ago, tuanphan said:

Use this CSS code

@media screen and (min-width: 768px) {
[data-section-id="65e07302487e8725e7601b17"] button.user-items-list-carousel__arrow-button {
    opacity: 1 !important;
    transform: unset !important;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--left:before {
    content: "( PREV )";
    font-size: 13px;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--right:before {
    content: "( NEXT )";
    font-size: 13px;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--left:after,
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--right:after {
    display: none;
}}

 

fantastic thank you so much!

also looking for this! the auto loop is jumpy when it goes back to the beginning by scrolling left. it would be great to have it auto play through back to the beginning by just scrolling to the right still! 

@tuanphan thank you for the above! 

just testing the site and when you click next/prev, they disappear as you go through the carousel. is there a way to keep them visible through the whole scroll of the carousel? 

www.moonlitdesign.uk/home-old