-
Posts
139 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by moonlitdesign
-
change list carousel arrows icons into text / words
moonlitdesign replied to daniellenoakes's topic in Customize with code
is there a way to do this for the mobile arrows too? its working on desktop for me but not mobile ! I tried this code: @media screen and (max-width:767px) { .mobile-arrows { display: none !important;} .desktop-arrows { display:block!important;} .user-items-list-carousel__arrow-container { width:450px!important; margin: auto!important; } } but looks awful! they aren't showing centred, or the correct colour on mobile #1d1d1d - They have a blue link colour. - i need a way to be able to adjust the space in the middle between the 'arrows' so it doesn't affect the visibility of the quote. www.moonlitdesign.uk/home-old @tuanphan thank you!- 11 replies
-
- carousel
- list-summary
-
(and 1 more)
Tagged with:
-
Apply border and other css effects to image shapes
moonlitdesign replied to PEARLERwork's topic in Customize with code
yes please that would be amazing ! @tuanphan -
@tuanphan This is an incredible start thank you so much! I changed the width to '0' to make it completely vanish! there's still the issue that it starts to disappear straight away, rather than about 600 scroll down the page, like this code: <script> $(window).scroll(function(){ var scroll = $(window).scrollTop(); if(scroll > 700){ $('header#header').addClass('scrollNav'); } else{ $('header#header').removeClass('scrollNav'); } }); </script> <style> - is there a way to add a scroll time like this for the big MOONLIT image too ? - is there also a way to add a left direction to the 'shrink' animation? so it looks like its disappearing into the corner and being replaced with the new logo 😄 thank you!
-
Apply border and other css effects to image shapes
moonlitdesign replied to PEARLERwork's topic in Customize with code
I'm also looking for this, all the codes i've tried seem to be outdated and are not working! www.moonlitdesign.uk/design-services -
yes please that would be great! the text needs to not show up as a link though, so no underline or hand pointer if thats okay! also, could the transition of the image appearing be smoother? thank you so much!!
-
@tuanphan www.moonlitdesign.uk/home-old
-
Hi there, i've got my nav logo how i want it, now i need to complete the illusion with the large logo image. i need to shrink the 'MOONLIT' image down into the left corner on scroll, on the same time/slightly before the nav logo appears. i'm using this @tuanphan code in page > settings >advanced >header: <script> $(window).scroll(function(){ var scroll = $(window).scrollTop(); if(scroll > 700){ $('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> along with CSS > website tools: //hide logo until scroll// .homepage .header-title-logo, .homepage .header-mobile-logo a { opacity: 0; position: relative; top: -10vh; transition: all .75s; } .homepage .shrink .header-title-logo, .homepage .shrink .header-mobile-logo a { opacity: 1; position: relative; top: 0; }
-
pre loader landing page - grow hero image
moonlitdesign replied to moonlitdesign's topic in Customize with code
can it not be set accurate to the time it takes to load? maybe 1 second! -
pre loader landing page - grow hero image
moonlitdesign replied to moonlitdesign's topic in Customize with code
of course 🙂 would you have an idea of how to code that? also i've found this i'd like to use! does anyone know how to add a codepen pre loader? https://codepen.io/thebabydino/pen/GRqKwqX thanks! -
Create page loading/page transition effect
moonlitdesign replied to KhanhLy174's topic in Customize with code
is it possible to get an image to load in and then grow to it's correct size on homepage only load? like this site: www.capsule-design.studio my site: www.moonlitdesign.uk/home-old -
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 🙂
-
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
-
reduce gap between simple list item columns
moonlitdesign replied to moonlitdesign's topic in Customize with code
legend, thank you so much as always- 5 replies
-
- list-summary
- margin
-
(and 3 more)
Tagged with:
-
reduce gap between simple list item columns
moonlitdesign replied to moonlitdesign's topic in Customize with code
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?- 5 replies
-
- list-summary
- margin
-
(and 3 more)
Tagged with:
-
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
- 5 replies
-
- list-summary
- margin
-
(and 3 more)
Tagged with:
-
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
-
change logo and shrink it on scroll
moonlitdesign replied to moonlitdesign's topic in Customize with code
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! -
change logo and shrink it on scroll
moonlitdesign replied to moonlitdesign's topic in Customize with code
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 😞 -
Navigation Circle With Hover Effect
moonlitdesign replied to MarcUK1603's topic in Customize with code
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; } ///////