moonlitdesign

Hi there, I need help with this, I need to force mobile hamburger navigation to show on tablet as well as mobile, using 7.1 thanks!

yes. When i add overflow:hidden code, it breaks my mobile scrolling. but i need it to hide the extra sides 😞 what can i use instead ? Thanks!

Hey, i'm having exactly the same issues, could you please be an angel and check my site out? www.moonlitdesign.uk super struggling 😞

Hey, we found the bit of code that was breaking the mobile scroll, however it's the code needed that removes the excess page space on the sides. Do you have a work around instead of using the code below? html, body {overflow-x:hidden;}

Do you have a suggestion of how to get rid of the excess? Could you plea

Hey! I managed to fix the close icon, but not the logo. The logo is still white when you open the menu anywhere other than the landing screen. what’s happening is the sticky nav is kicking in rather than the normal set logo header.

Please can anyone help ? Thank you x

Www.moonlitdesign.Uk i have a few open threads with you, I’m totally desperate for help! thank you

Site URL: http://www.moonlitdesign.uk Hi there, when i open the mobile dropdown menu from anywhere other than the landing page of the site, it displays the wrong logo and hides the close icon. attached images for clarity. please help ,this is preventing me from launch! Thanks

I'm using this code for the same issue, but it is disrupting the scroll experience on mobile. How can I resolve this?

The above code didn't work for me, i'm having the same issues! 7.1 thank you x

Thank you this did fix the scroll issue, but how can I then stop this from happening?

its on mobile view only, i have sent it to a few other friends as testers and they are experiencing the same scroll issues. It started to happen after I added an announcement bar, but when I tried to remove it to see if that would fix it, the problem remained...

Site URL: http://www.moonlitdesign.uk The page scroll on mobile is getting stuck whether you're trying to scroll up or down and I don't know why D': its driving me insane I don't know what to do!! Please help. Thank you www.moonlitdesign.uk

.form-wrapper .field-list .field select { font-size: 12px !important; } worked for me in 7.1 just incase anyone ever runs into this

Heey, this is still an issue, when you open the menu from anywhere other than the landing screen on mobile, the drop down menu does not display correctly. Could you please check this out? thanks!

Thanks for the reply! the announcement bar is hidden on scroll. I have fixed the padding issue but the scrolling problem is still at large. I don't know why but every page is getting stuck when scrolling on mobile, please could you check this out? www.moonlitdesign.uk/home

Hi Tuanphan, Yes please I do still need help. I have also managed to break a few other things on my site if you look at my other threads. I'm really not sure what's going on! 😞 www.moonlitdesign.uk/home The dropdown menu on mobile shows the sticky navigation bar instead of the normal menu header, when you scroll/ open the menu from anywhere other than the landing page. Since adding in an announcement bar, It has affected the scrolling ability on mobile where the page seems to be getting stuck!!! Thank you so much in advance.

Site URL: http://www.moonlitdesign.uk/home Hi there, Since adding in an announcement bar on my site, my mobile sticky navigation/menu bar has completely messed up and broken. It is showing lots of extra padding at the top than before when it shouldn't, even though nothing else has changed. It is also affecting the scroll ability on mobile, it's as if the landing page is getting stuck and I cannot scroll back up or down for a few seconds. Really need help! thank you!!! www.moonlitdesign.uk/home

Site URL: http://www.moonlitdesign.uk i'm really struggling to to get to grips with why my website looks different on mobile view on my desktop to my actual mobile. please see screenshots for examples. it's making editing a real ball ache and the view on other mobile testing is all different too . i don't know what i'm doing wrong 😞 nothing seems to just centre, nothings aligns where i put it. also on desktop when i resize the browser, everything seems to move and i dont know what bit of code im missing 😞 help needed please 😢 www.moonlitdesign.uk

Site URL: http://www.moonlitdesign.uk Hey! I am having issues with my navigation menu on mobile when the dropdown is open. It is currently giving me the ability to page scroll which is causing my sticky nav bar designed for scroll to appear and take over the static nav which has the 'X' close icon. Could I please have some help to try and disable the scroll so the sticky nav does not appear. www.moonlitdesign.uk FOR MOBILE

Please could I have a normal mobile responsive for this, struggling!! <ul class="main-box"> <li class="box active"><span>Discover</span> <div class="detail active"> <p> Each projects start with the discovery phase where we collect as much data as possible about your business, your brand and any visual inspiration. Through this research, we will craft two creative directions in the form of moodboards! </p> </div> </li> <li class="box"><span>Develop</span> <div class="detail"> <p> Based on your feedback, we then delve into the design phase of the project. Depending on your package, this would usually start with the choice of two brand concepts, of which we will develop the one you resonate with most for your full visual identity. Each project allows for a few rounds of amendments until we achieve the desired look. </p> </div> </li> <li class="box"><span>Deliver</span> <div class="detail"> <p> Once we’ve signed off all the designs, I will start packaging all of your files for you, available through your own client portal. For each element, you will be provided with multiple file types for all your web and print needs. You will also receive all relevant launch material to help you deliver your new branding.</p> </div> </li> </ul> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap'); body .main-box { display: flex; background: none; margin: 70px auto 70px auto; width:1000px; } .box { height: 400px; padding:10px; border-right: 1px solid black; webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; position: relative; overflow: hidden; list-style: none; background-color: #EAE6DE; } .detail { width: 85%; height: 100%; position: absolute; right: 20px; top:20px; bottom: 0; background: #EAE6DE; color:black; opacity: 0; padding:120px; marign: auto; box-sizing:border-box; webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; -webkit-transform: translateY(100%); transform: translateY(100%); } .box.active { width: 100% !important; } .box.active .detail { opacity: 1; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; transform: none; } .box span { writing-mode: vertical-rl; font-size: 30px; font-family: meno-banner; letter-spacing: 0px; height: 100%; display: flex; align-items: center; justify-content: center; color: #000; width: 30px; transform: rotate(180deg); font-weight: 300; cursor: pointer; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0 auto; font-style: italic; } .box.active span { left:30px; right:auto; margin:0; font-weight:300; color: #57432B; background-color: #EAE6DE; } .box:hover:not(.box.active) span { background-color:#57432B; color: #EAE6DE; width: 100%; height: 100%; } .box.active span {cursor: default;} .box p { line-height: 24px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var getslide = $('.main-box li').length - 1; var slidecal = 30/getslide+'%'; $('.box').css({"width": slidecal}); $('.box').click(function(){ $('.box').removeClass('active'); $(this).addClass('active'); }); </script>

Site URL: http://www.moonlitdesign.uk/photography i'm looking to get this desired typewriter effect on my site, but it's just not working at all as seen similarly to here: https://www.thecontentcreator.co.uk/ i've tried multiple things and codes from the forums and the only thing that i can get to work and animates is: HTML IN MARKDOWN: <div class="typewriter"> <div class="typewriter-text"> <h1> STAND OUT WITH </h1> </div> </div> CSS IN DESIGN > CUSTOM CSS .typewriter { font-family: ogg-regular; display: flex; } .typewriter-text { display: flex; overflow: hidden; animation: typing 4s steps(20, end), blink 1s step-end infinite; white-space: nowrap; color: #006373; border-right: 3px solid #bdbdbd; box-sizing: border-box; margin: auto; } @keyframes typing { from { width: 0% } to { width: 100% } } @keyframes blink { from, to { border-color: transparent } 50% { border-color: #bdbdbd; } } but it doesn't work how I desire it to. I want STAND OUT WITH to be static, and portraits, stock imagery, in-action shots, to be typewriter effect

I've just seen your site, it looks beautiful! i'm looking to get this desired typewriter effect on my site, but it's just not working at all. I wondered if you could help me maybe, like where did you put the code etc? i've tried multiple things and the only thing that animates is: HTML IN MARKDOWN: <div class="typewriter"> <div class="typewriter-text"> <h1> STAND OUT WITH </h1> </div> </div> CSS IN DESIGN > CUSTOM CSS .typewriter { font-family: ogg-regular; display: flex; } .typewriter-text { display: flex; overflow: hidden; animation: typing 4s steps(20, end), blink 1s step-end infinite; white-space: nowrap; color: #006373; border-right: 3px solid #bdbdbd; box-sizing: border-box; margin: auto; } @keyframes typing { from { width: 0% } to { width: 100% } } @keyframes blink { from, to { border-color: transparent } 50% { border-color: #bdbdbd; } } but it doesn't work how I desire it to. I want STAND OUT WITH to be static, and portraits, stock imagery, in-action shots, to be typewriter effect

I just can't get this to work for me. I feel like i've tried everything but not sure where to add the code etc as no success. Please help this is driving me mad! https://www.moonlitdesign.uk/photography i want STAND OUT WITH to remain static, and then portraits, stock imagery, in-action shots, to change in the type writer effect.