PEARLERwork Posted February 10, 2021 Share Posted February 10, 2021 15 hours ago, Sotiris said: I've gotten mine to work by changing the header layout to this one below and using the code I had pasted above. Maybe this will help anyone whose logo is off-center. Ohhh this made it worse for me unfortunately! 𝓚𝓪𝓽𝓲𝓮 ✦✦ ⓅⒺⒶⓇⓁⒺⓇ.ⓌⓄⓇⓀ ➸ Link to comment
PEARLERwork Posted February 10, 2021 Share Posted February 10, 2021 18 hours ago, tuanphan said: Logo looks fine here. Can youexxplain clearly? Hi! I find it most clear that it's off center when I open the menu - see here: https://share.getcloudapp.com/KouZBdYD 𝓚𝓪𝓽𝓲𝓮 ✦✦ ⓅⒺⒶⓇⓁⒺⓇ.ⓌⓄⓇⓀ ➸ Link to comment
PEARLERwork Posted April 22, 2021 Share Posted April 22, 2021 @tuanphan Have you figured out how to get the cart icon to show on desktop? http://adaptology.squarespace.com/?password=pearler Thanks! 𝓚𝓪𝓽𝓲𝓮 ✦✦ ⓅⒺⒶⓇⓁⒺⓇ.ⓌⓄⓇⓀ ➸ Link to comment
Callan Posted July 15, 2021 Share Posted July 15, 2021 On 8/5/2020 at 8:47 AM, tuanphan said: Add to Home > Design > Custom CSS /* burger 3 lines */ .burger-box .patty { transform: translatey(0) !important; height: 2px; } This was just what I was looking for, thank you! Does anyone know how I could add an uppercase MENU label above the hamburger?! Cheers, Link to comment
tuanphan Posted July 16, 2021 Share Posted July 16, 2021 18 hours ago, Callan said: This was just what I was looking for, thank you! Does anyone know how I could add an uppercase MENU label above the hamburger?! Cheers, If you share link to your site, we can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
sambatista Posted November 4, 2021 Share Posted November 4, 2021 On 2/24/2020 at 9:23 AM, tuanphan said: Thank you. I just tweaked your code to work on my site, 7.1 Here is code /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } } Hi @tuanphan! Thank you so much for this code. I was able to successfully use it and apply it on my website. However, I noticed that the transition isn't applied to it. Only when the screen hits the mobile breakpoint. Is there a way to add the transition to your code? Thanks! Link to comment
tuanphan Posted November 7, 2021 Share Posted November 7, 2021 On 11/4/2021 at 9:55 PM, sambatista said: Hi @tuanphan! Thank you so much for this code. I was able to successfully use it and apply it on my website. However, I noticed that the transition isn't applied to it. Only when the screen hits the mobile breakpoint. Is there a way to add the transition to your code? Thanks! However, I noticed that the transition isn't applied to it Can you explain in more clearly this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Potter Posted November 11, 2021 Share Posted November 11, 2021 (edited) Is there a fix for altering the type line spacing and type size within the desktop menu, whilst keeping the logos where they are? Edited November 11, 2021 by Potter Link to comment
sambatista Posted November 12, 2021 Share Posted November 12, 2021 On 11/6/2021 at 10:35 PM, tuanphan said: However, I noticed that the transition isn't applied to it Can you explain in more clearly this? Oops, sorry @tuanphan! I'm talking about the fade in of the menu. It happens when you're on mobile, it doesn't work if you apply this "custom breakpoint" for tablets. Is there a way to have it there as well? Link to comment
tuanphan Posted November 14, 2021 Share Posted November 14, 2021 On 11/11/2021 at 5:44 PM, Potter said: Is there a fix for altering the type line spacing and type size within the desktop menu, whilst keeping the logos where they are? Try adding to Design > Custom CSS @media screen and (min-width:992px) { div.container.header-menu-nav-item a { margin-top: 5px !important; margin-bottom: 5px !important; } } Potter 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
PolyesterZine Posted January 14, 2022 Share Posted January 14, 2022 Hi I tried the codes in this thread but it didn't work for my site if anyone can help me? Site is: https://www.polyesterzine.com/ Feel like I've tried everything at this point Link to comment
tuanphan Posted January 15, 2022 Share Posted January 15, 2022 On 1/14/2022 at 8:42 PM, PolyesterZine said: Hi I tried the codes in this thread but it didn't work for my site if anyone can help me? Site is: https://www.polyesterzine.com/ Feel like I've tried everything at this point Add to Design > Custom CSS /* Force mobile menu on desktop */ @media screen and (min-width:901px) { header.Header.Header--top { display: none !important; } .Mobile.loaded { display: block !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
PolyesterZine Posted January 17, 2022 Share Posted January 17, 2022 Thank you so much!! Link to comment
wallacewebdesign Posted April 25, 2022 Share Posted April 25, 2022 (edited) On 2/24/2020 at 7:23 AM, tuanphan said: Thank you. I just tweaked your code to work on my site, 7.1 Here is code /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } } Thanks Tuanphan!!! As usual you've got pretty much exactly what I needed and have been a life-saver. Thank you, thank you, thank you! I had changed Call to Action button to a search block (found that trick elsewhere) and on mid-width displays the nav-menu was overlapping the search button. Using your code I was able to increase the width at which the hamburger menu displayed, thus preventing overlap. I had to make one change in order to have your code work in my situation. I changed "min-width" to "max-width". With that one change and no other changes it worked perfectly (other than experimenting until I found the width I needed it set to). Edited April 25, 2022 by wallacewebdesign Clarification. tuanphan 1 Link to comment
tuanphan Posted April 27, 2022 Share Posted April 27, 2022 On 4/26/2022 at 3:13 AM, wallacewebdesign said: Thanks Tuanphan!!! As usual you've got pretty much exactly what I needed and have been a life-saver. Thank you, thank you, thank you! I had changed Call to Action button to a search block (found that trick elsewhere) and on mid-width displays the nav-menu was overlapping the search button. Using your code I was able to increase the width at which the hamburger menu displayed, thus preventing overlap. I had to make one change in order to have your code work in my situation. I changed "min-width" to "max-width". With that one change and no other changes it worked perfectly (other than experimenting until I found the width I needed it set to). Okay. If you have any other questions, just reply here. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Dsimons Posted August 2, 2022 Share Posted August 2, 2022 On 2/8/2021 at 8:26 PM, Guest said: Not sure if anyone still checks this, but I tried the following code on my site and it has caused the cart link to disappear, as well as adding extra spacing between the nav links when I open the menu. Also, the burger icon looks a bit odd. Here is my code so far: /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } } And here is the missing cart icon & extra space between nav links. Hi, I have the exact same problem with my cart icon. I can't find a way to make it appear again. Did you or anyone else find a solution for this? Thanks so much!! Dani Link to comment
tuanphan Posted August 4, 2022 Share Posted August 4, 2022 On 8/2/2022 at 7:30 PM, Dsimons said: Hi, I have the exact same problem with my cart icon. I can't find a way to make it appear again. Did you or anyone else find a solution for this? Thanks so much!! Dani Try remove this code /* Hide header button */ .header-actions { display: none; } If it doesn't work, please share link to your site. We can check easier Dsimons 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Dsimons Posted August 4, 2022 Share Posted August 4, 2022 2 hours ago, tuanphan said: Try remove this code /* Hide header button */ .header-actions { display: none; } If it doesn't work, please share link to your site. We can check easier This worked like a charm!! Thank you so much. tuanphan 1 Link to comment
tors Posted February 10, 2023 Share Posted February 10, 2023 Thanks so much for posting this, it's been super helpful! I'm trying to go one step further and rotate the mobile menu bar on desktop so it shows vertically, so I get something like this: https://www.helengreendesign.com I've got the mobile menu forced on desktop (thanks tuanphan!) but wondered if there's a way of getting that vertical bar on desktop with horizontal menu slide out please? My site is https://houseofvictoire.com Link to comment
tuanphan Posted February 11, 2023 Share Posted February 11, 2023 21 hours ago, torsgrantham said: Thanks so much for posting this, it's been super helpful! I'm trying to go one step further and rotate the mobile menu bar on desktop so it shows vertically, so I get something like this: https://www.helengreendesign.com I've got the mobile menu forced on desktop (thanks tuanphan!) but wondered if there's a way of getting that vertical bar on desktop with horizontal menu slide out please? My site is https://houseofvictoire.com Add to Design > Custom CSS .header-menu-nav-folder[data-folder="root"] { overflow: hidden; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tors Posted February 12, 2023 Share Posted February 12, 2023 (edited) Thanks tuanphan. I've added that in to my custom css but nothing's happening? Edited to add, scratch that, I've figured out how to get it all to work! Well, except for the underline on the mobile menu active link, is there a way to remove that please? Edited February 12, 2023 by torsgrantham Link to comment
tuanphan Posted February 15, 2023 Share Posted February 15, 2023 On 2/12/2023 at 2:49 PM, torsgrantham said: Thanks tuanphan. I've added that in to my custom css but nothing's happening? Edited to add, scratch that, I've figured out how to get it all to work! Well, except for the underline on the mobile menu active link, is there a way to remove that please? Which underline are you referring to? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Cristina_Rosebud Posted May 22, 2023 Share Posted May 22, 2023 I managed to get the burger menu on desktop with the code you all shared, great. But i was wondering is it possible to have the burger menu ALWAYS VISIBLE in the fixed position and on scroll back visualize only the color bar underneath plus the centered logo? www.waldkinder-anzbach.at Link to comment
tuanphan Posted May 25, 2023 Share Posted May 25, 2023 On 5/22/2023 at 7:18 PM, Cristina_Rosebud said: I managed to get the burger menu on desktop with the code you all shared, great. But i was wondering is it possible to have the burger menu ALWAYS VISIBLE in the fixed position and on scroll back visualize only the color bar underneath plus the centered logo? www.waldkinder-anzbach.at Move this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment