-
Posts
106 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by moonlitdesign
-
Hey @Nick_SquareKicker I can't seem to get the mobile horizontal scroll working on my site whatsoever! it is leaving a large blank gap underneath the section and not completing the full scroll of the section. any help would be amazing! thanks! www.moonlitdesign.uk/design-services
-
Hey! i don't know why this has stopped working as it was fine this morning. i had an overlapping image but now the section below is showing above / on top of the image. i've tried z-index but no luck. here's current code: @media screen and (min-width:768px) { #block-dcd7158a35cf1cf082ed { transform:translateY(50%); z-index:9999!important;} } www.moonlitdesign.uk/design-services
-
How to make menu navigation a drop down on mobile
moonlitdesign replied to a topic in Customize with code
thanks! this in theory works, but makes the menu when open from another page even more messed up. im not sure why it is appearing differently from different pages! crazy.- 37 replies
-
add codepen preloader animation to site
moonlitdesign replied to moonlitdesign's topic in Customize with code
thank you so much for trying ! i managed to contact the creator with what you said and their reply was this: "There's an arrow down in the top right corner of the CSS panel. You click it and you get among the options "View Compiled CSS". Alternatively you can just add .css at the end of the CodePen link. Just don't forget to remove the #btn--yp styles, which are strictly for the YouTube link (linking back to this video from CodePen)." if that helps?- 5 replies
-
- code
- code-injection
-
(and 1 more)
Tagged with:
-
add codepen preloader animation to site
moonlitdesign replied to moonlitdesign's topic in Customize with code
thank you for your time!! i'm wanting to use it as part of a loading screen - not sure where to put the code for that 🙂- 5 replies
-
- code
- code-injection
-
(and 1 more)
Tagged with:
-
Hey i'm trying to add this pre loading animation to my site from code pen, but am not having any luck. https://codepen.io/thebabydino/pen/GRqKwqX is this possible? thank you
- 5 replies
-
- code
- code-injection
-
(and 1 more)
Tagged with:
-
yeah i managed to solve the issue, however have a few other issues! - the counters show in different alignment when you open the menu from different pages. meaning it touches the borders when it shouldn't. opening the menu from the homepage is the correct look of how the numbers should be. - and the sub / secondary drop down nav menu should not have counters. i tried to add: :not(.header-menu-nav-item .header-menu-nav-folder) to my menu page number code but didn't work! - the close icon is also not centred in the circle border
-
add a circle border around the menu burger icon
moonlitdesign replied to moonlitdesign's topic in Customize with code
i've managed to get a circle border, but the close icon is in the wrong place. it needs nudging into the center of the circle / left. updated code: /* burger */ .burger-inner>div { width: 50% !important; } .burger-inner>div { left: 0 !important; right: 0 !important; } .burger-box {border:1px solid #1d1d1d; border-radius:50%; } -
Hi there, im looking to add a circle border around the burger menu icon but having difficulty. the code im trying is: /* burger */ .burger-inner>div { width: 50% !important; } .burger-inner>div { left: unset !important; right: 0 !important; } .burger {border:1px solid #1d1d1d; border-radius:50%; } www.moonlitdesign.uk/home-old
-
How to make menu navigation a drop down on mobile
moonlitdesign replied to a topic in Customize with code
Hey @tuanphan i paid for a plugin 🙂 I do however need help to disable the menu counter on the sub navigation, and make sure the menu counter is in the same position (a little higher than the page menu links) when the menu is opened from all pages. currently, when you open the menu from the homepage, the counters are in line with the menu links, and when you open the menu from any other page, the counters are showing much higher! any thoughts would be so appreciated thank you www.moonlitdesign.uk/home-old- 37 replies
-
change list carousel arrows icons into text / words
moonlitdesign replied to daniellenoakes's topic in Customize with code
THANK YOU ! that worked perfectly. is there a way to increase the size of the gap between them so they are full width? @tuanphan- 8 replies
-
- carousel
- list-summary
-
(and 1 more)
Tagged with:
-
remove background colour on blog summary item post
moonlitdesign replied to moonlitdesign's topic in Customize with code
www.moonlitdesign.uk/our-story -
How to make menu navigation a drop down on mobile
moonlitdesign replied to a topic in Customize with code
@jnmillre did you manage to write the code? would be super incredible! thank you https://moonlitdesign.uk/home-old- 37 replies
-
How to make menu navigation a drop down on mobile
moonlitdesign replied to a topic in Customize with code
Could you please share your code for this effect, this is exactly what im after!!! thank you @Lauren_C https://moonlitdesign.uk/home-old @tuanphan- 37 replies
-
hi there, i'd like to replace the mobile carousel arrows with (PREV) and (NEXT) just like on desktop version, and be able to control the space inbetween the middle of them, any help would be fab thank you! www.moonlitdesign.uk/home-old
- 1 reply
-
- carousel
- list-summary
-
(and 3 more)
Tagged with:
-
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!- 8 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; }