moonlitdesign

hey there, is it possible to do something like this pre loader effect on the landing page? 

- where the hero image appears and grows: https://www.capsule-design.studio/

i wouldn't want mine to go full width.

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

and also something similar like the loader that appears between each content page?

very cool 🙂

On 3/8/2024 at 11:36 AM, tuanphan said:

I created this quick demo, you can see to see if it is what you want

https://tuanphan3.squarespace.com/hover-client-name-show-logo-1?noredirect

pass: abc

(I wrote this guide, if you see it is fine, I will send guide)

Hey @tuanphan thank you so much for this, is there a way to make the text not disappear? something a bit more like this: https://codepen.io/RMKNGY/pen/rrpzgW

but the images appear ease in rather than straight away

Just now, Ziggy said:

You can use this, adjust the value:

.user-items-list-simple[data-alignment-vertical="stretch"] {
    max-width: 1000px;
}

 

legend, thank you so much as always

2 minutes ago, Ziggy said:

Try this Custom CSS:

.list-item-content__description
  max-width: 280px;
}
          

 

i can media query that for desktop and its made the content perfect, thank you so much. is there now a way to make them closer together and reduce the gap between them?

hey there,

im looking to reduce the width of the gap / column between my simple list items!

not sure if it's the margins or padding or what but nothing i'm doing is helping! 

I'd also like to reduce the width of the actual content on desktop only.

url: https://www.moonlitdesign.uk/our-story

i'm looking for this also, www.moonlitdesign.uk/our-story 

Demo: https://tympanus.net/Development/RapidImageHoverMenuEffects/index2.html

Hey @tuanphan do you have a code that would work on fluid engine 7.1 and isn't the homepage?

I would love the image to smoothly follow the cursor not just appear if possible

looking to achieve this on the 'inspired by' section: www.moonlitdesign.uk/our-story

23 hours ago, cro0w said:

79$ for a bit of code! Yikes!

Try this:

 

/* Shrinking Logo On Scroll - 7.1 */
.header.shrink img {
    max-width: 120px; /* Adjust the max width as needed */
    transition: all 0.2s ease-in-out;
}

.header img {
    transition: all 0.2s ease-in-out;
}

/* Second logo styling */
.second-logo {
    display: none; /* Initially hide the second logo */
    max-width: 120px; /* Adjust the max width as needed */
    transition: all 0.2s ease-in-out;
}

/* Show second logo on scroll and align left */
body:not(.homepage) .second-logo {
    display: block;
    float: left; /* Align left */
}

/* Trigger effect at the start of the second page section */
body:not(.homepage) .header.shrink .second-logo {
    opacity: 1; /* Adjust opacity or other styles as needed */
}

PRO Tip: Use ChatGTP to 1 work out the quirks.

Hope it helps. Stay creative!

thank you, yeah i know gutted, but hopefully can utilise on as many client projects as possible hahah. thank you for the code, i'm still not quite getting the effect i want even with trying to modify it. it's annoying because i've seen it done on other sites: www.lowtide.co for example. but her logo stays the same, where as i want to change mine. will keep trying to work on it!

I haven't thus yet, I bought the styled square plug in but still couldn't get it to work in the way I wanted. 

I put some code together randomly but it looks awful and can't work out how to fix it 😞

would you be able to share the code please to the actual circle navigation link hover effect? thank you! @MarcUK1603

hi there, i've achieved a vertically stacked menu but i'm struggling to achieve the desired 'drop down' secondary menu look. 

attached is what it currently looks like, and the desired look.

- remove current moon icon only on the drop down folder menu links and replace with the small icon circle style: https://www.thestyledsquare.com/navigation-circle-hover-effect-plugin

- remove small icon circle from the main menu menu links

- currently the box won't stay active if you move the cursor away from 'offerings'

- offerings link hover stroke effect to extend to the box

www.moonlitdesign.uk/home-old

CURRENT CODE:

//navigation moon icon//

/*BASIC STYLES FOR ALL LINKS*/
.header-nav-item a::before,
.header-menu-nav-item a::before {
  content: '';
  background-size: contain !important;
  background-repeat: no-repeat !important;
  flex-direction: column;

}

.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item:nth-child(1) a::before {
  background: url('https://static1.squarespace.com/static/61aa04c639b60c4711dd2d19/t/65e0b869f4fe0936cab39abb/1709226089614/Asset+23.png');
    height:25px;
  width: 10px;
}

//////

// CIRCLE NAVIGATION HOVER EFFECT

.header-nav-item {
a {
color: #2b2b0d !important;
&:before {
content: '○ ';
font-size: 1.1em;
}
&:hover:before {
content: '● ';
}
 
}
}

///////

//drop down menu styling//

/* Folder dropdown style */
.header-nav-folder-content {
    background: #E8E8DD !important;
    border-radius: 15px;
  border: 1px solid #1d1d1d;
}

.header-nav-folder-content {
    left: 100px !important;
  margin-top:-30px;
}

//dropdown menu hover and active //

.header-nav-folder-item--active .header-nav-folder-item-content {
  background: none !important;
  text-decoration:line-through;
}

///////

//menu hover effect//

.header-nav-item--active a:hover {
text-decoration:line-through;
  
}

.header-nav-item--active {text-decoration:line-through;
} 

//active state//

div.header-nav-item--active a {
    background-image: none !important;
}

///////
 

I swear I tried that haha nevermind, it worked amazing thank you so much!!! 

2 minutes ago, melody495 said:

You want the top of the text touching the border between the coloured sections?

yes, no gap at all between the scrolling text and the top of the section

14 minutes ago, melody495 said:

Try this in your Custom CSS. 

.Marquee-svg {
    transform: none;
}

Let me know how it goes. Might need to add !important.

When you say remove padding, assuming something like this? Rather than having the top of the text touching the border?

hey lovely thank you for replying and taking the time to do that, it nudged it up slightly but didn't make it completely flushed, is there anything else i can try? xx

Just now, melody495 said:

Hi @moonlitdesign please share the page url where this marquee is used 

www.moonlitdesign.uk/home-old

hi there! i would like to remove the padding at the top of the marquee scrolling text so that it sits flush to the top of the section.

I've tried everything i can think of with no avail.

thanks!!

styled square plugin should achieve this

that is a styled square plugin! 

On 2/29/2024 at 8:52 AM, tuanphan said:

Hi,

I see you figured it out or still need help?

@tuanphan

I've managed to align the menu, but I am struggling to achieve the desired logo effect

please see other thread: 

hi there, i'm looking to shrink and replace the main logo with a different logo on scroll.

the second logo needs to be left aligned.

I would like this to kick into effect at the start of the second page section. 

I would also only like the second smaller logo to appear in the left corner on all content pages.

here is an example: https://lowtide.co/

another example: https://www.thestyledsquare.com/header-scroll-feature-plugin?fbclid=IwAR1U437b3xWcCzGTCe6jKmJUcgmxpua1SU6tLDr26BUzmygfooxQK1NbZbs

my site url: www.moonlitdesign.uk/home-old

attached is my design:

I registered a site for my client a month back, but i dont see the option to upgrade to the fluid engine? when can i expect to receive this? 

thanks!

pretty much any image where i've changed the position of it across the whole site, if you resize the browser window horizontally or vertically, you will see what i mean

what was the solution? 

Site URL: http://www.moonlitdesign.uk

I am so disheartened and not sure what i've done wrong. 

How do I create a fully responsive design where images and text do not move around when you resize the browser?
i've set the media queries for mobile, tablet and laptop perfectly.

There isn't one set for desktop, as I did all that coding first, then did the media queries for the other devices after. 

is this my issue? I'm just trying to find out what is best practices to make it work.