-
Posts
154 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by 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 🙂
-
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; } ///////
-
styled square plugin should achieve this
- 5 replies
-
- scrolling
- custom-css
-
(and 2 more)
Tagged with:
-
that is a styled square plugin!
-
vertical stacked left aligned navigation links
moonlitdesign replied to moonlitdesign's topic in Customize with code
@tuanphan I've managed to align the menu, but I am struggling to achieve the desired logo effect please see other thread:- 2 replies
-
- menu
- navigation
-
(and 3 more)
Tagged with:
-
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've designed this landing page for my website, and now i'm stuck on what process to take. I want the logo to be initially fixed and then the image to overlap on scroll. The logo needs to then shrink down to a monogram style version once we come to the second section of the site (the section below the landing page). The navigation menu links need to be sticky and where they are the whole time. Do I, a) have the logo set as a header title/logo or b) hide the header logo, just have the nav links to deal with and then have the logo as an image on the landing page? (shown here). if i do option b, this is what i need to do/need help with: Initial Setup: - Hide the header logo initially. - Implement the navigation menu links as sticky. - Make the menu navigation links vertically stacked, and left aligned to the full width of the page. - Add the circle icon above the nav links. Landing Page: - Display the logo as an svg image on the landing page. - Ensure it's initially fixed in position. Scroll Effects: - Use CSS or JavaScript to create the overlap effect of the image on scroll. - Make the necessary adjustments to ensure the logo behaves as desired during scrolling. Second Section: - Detect when the user scrolls to the second section. - Trigger the logo to shrink down to the monogram style version using CSS or JavaScript. https://www.moonlitdesign.uk/home-old
- 2 replies
-
- menu
- navigation
-
(and 3 more)
Tagged with:
-
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
- 4 replies
-
- responsive-design
- images
-
(and 3 more)
Tagged with:
-
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.
- 4 replies
-
- responsive-design
- images
-
(and 3 more)
Tagged with: