casafloralia Posted May 3, 2021 Share Posted May 3, 2021 hey everyone, I'm also trying to keep the hamburger menu on desktop. I've managed to do it, but can't seem to get my logo in the center. can anyone help? here's what I've done so far: @media screen and (max-width: 5000px) { /* Display burger icon at all widths*/ .header .header-burger { display: flex; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } /* burger position */ .header-display-desktop { flex-direction: row-reverse; } } https://janetesilveira.squarespace.com/ ps: 1234 Link to comment
tuanphan Posted May 5, 2021 Share Posted May 5, 2021 On 5/4/2021 at 12:50 AM, casafloralia said: hey everyone, I'm also trying to keep the hamburger menu on desktop. I've managed to do it, but can't seem to get my logo in the center. can anyone help? here's what I've done so far: @media screen and (max-width: 5000px) { /* Display burger icon at all widths*/ .header .header-burger { display: flex; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } /* burger position */ .header-display-desktop { flex-direction: row-reverse; } } https://janetesilveira.squarespace.com/ ps: 1234 Logo looks centered here. Can you explain clearly? 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
casafloralia Posted May 13, 2021 Share Posted May 13, 2021 On 5/5/2021 at 8:34 PM, tuanphan said: And I also found some problems. You can create new questions, we will help easier Site URL – https://janetesilveira.squarespace.com/ 1. (Desktop-Header) Remove right scroll? 2. (Tablet-Footer) center logo? 3. (Tablet-Homepage) reduce this space? 4. (Mobile-Blog) Add a space between image – read more? 5. (Tablet-Blog posts) Increase post width? Hi @tuanphan! Yes! I'd like hep with all that 🙂 Link to comment
tuanphan Posted May 14, 2021 Share Posted May 14, 2021 20 hours ago, casafloralia said: Hi @tuanphan! Yes! I'd like hep with all that 🙂 Add to Design > Custom CSS /* remove scroll bar on burger desktop */ @media screen and (min-width:992px) { .header-menu-nav-folder--active { overflow: hidden; } } /* tablet */ @media screen and (min-width:768px) and (max-width:992px) { /* center footer logo */ div#page-section-608ffe74d1bf763c75618aca>.row>.col { margin: 0 auto; width: 100%; } /* reduce space */ [data-section-id="6091547b96145d3ee02ae3e6"] { min-height: unset !important; } /* increase blog width */ .blog-item-inner-wrapper { width: 90% !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
casafloralia Posted May 14, 2021 Share Posted May 14, 2021 3 hours ago, tuanphan said: Add to Design > Custom CSS /* remove scroll bar on burger desktop */ @media screen and (min-width:992px) { .header-menu-nav-folder--active { overflow: hidden; } } /* tablet */ @media screen and (min-width:768px) and (max-width:992px) { /* center footer logo */ div#page-section-608ffe74d1bf763c75618aca>.row>.col { margin: 0 auto; width: 100%; } /* reduce space */ [data-section-id="6091547b96145d3ee02ae3e6"] { min-height: unset !important; } /* increase blog width */ .blog-item-inner-wrapper { width: 90% !important; } } Thank you @tuanphan! The footer logo on tablet is centered but it is way too big. Link to comment
casafloralia Posted May 14, 2021 Share Posted May 14, 2021 I'm still struggling to maintain the header logo centered on all devices. I guess it has something to do with the hamburguer menu. Link to comment
nickstein Posted May 14, 2021 Share Posted May 14, 2021 (edited) Hi folks, Anyone know how to force the hamburger menu on all screen sizes AND have it display to the right of the screen? N.B. the site has both the shopping cart and the members login enabled and also the social media links. Ideally, I'd like to end up with the following: Logo on the left Account Login | social links | shopping cart | Burger Menu on the right. The site is: https://jezrose.squarespace.com/home password: flowerpower Screenshot of the desired outcome attached. Unfortunately the code I am currently using means that resizing the browser window makes the burger icon cover the other header actions. the current code I'm using is: /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } } .burger-box { position: absolute; right: -88vw!important; top: -15px; margin-left:50px } Edited May 14, 2021 by nickstein added screenshot Link to comment
vgomez Posted November 1, 2021 Share Posted November 1, 2021 On 1/5/2021 at 7:44 AM, ehernandezkpg said: Hi guys, I hate to add on to the questions but does anyone know how to get the burger menu with three lines and the actual word "menu" to the side or on top? Or can I just custom create a vector and upload and replace link from previous post about three lines? It's the LAST thing I need to finally publish the site 😞 Also, the old menu will flash when switching pages but only for a tiny bit, has anyone found the fix? Thank you Hey, I know its been a couple of months. I just ran into the same issue "Also, the old menu will flash when switching pages but only for a tiny bit, has anyone found the fix?" Did you or anyone end up finding out how to fix it? Link to comment
tuanphan Posted November 4, 2021 Share Posted November 4, 2021 On 11/2/2021 at 5:22 AM, vgomez said: Hey, I know its been a couple of months. I just ran into the same issue "Also, the old menu will flash when switching pages but only for a tiny bit, has anyone found the fix?" Did you or anyone end up finding out how to fix it? Can 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
blakelyhi Posted December 1, 2021 Share Posted December 1, 2021 @tuanphan I am trying to center logo after implementing the hamburger navigation as well. Thank you in advance! Website is blank-supply.com Link to comment
MoonMama Posted December 2, 2021 Share Posted December 2, 2021 (edited) 19 hours ago, blakelyhi said: @tuanphan I am trying to center logo after implementing the hamburger navigation as well. Thank you in advance! Website is blank-supply.com Hi, I need help. I'm also trying to center the logo after adding the burger menu and keep it on the left across all devices. https://ellipse-prism-hf54.squarespace.com pw moonmama Edited December 2, 2021 by MoonMama Link to comment
tuanphan Posted December 4, 2021 Share Posted December 4, 2021 On 12/2/2021 at 4:03 AM, blakelyhi said: @tuanphan I am trying to center logo after implementing the hamburger navigation as well. Thank you in advance! Website is blank-supply.com Don't remove any code Add to Design > Custom CSS /* Center title */ @media screen and (min-width:768px) { .header-title-nav-wrapper { flex: 1 0 33.333%; width: 333.333%; text-align: center; flex-direction: column-reverse; } .header-burger { width: 33%; justify-content: flex-start !important; } .header-layout-branding-center .header-title { width: 100% !important; } .header-layout-branding-center .header-nav { display: none; } } blakelyhi 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
tuanphan Posted December 4, 2021 Share Posted December 4, 2021 On 12/2/2021 at 10:57 AM, MoonMama said: Hi, I need help. I'm also trying to center the logo after adding the burger menu and keep it on the left across all devices. https://ellipse-prism-hf54.squarespace.com pw moonmama Try above code 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
MoonMama Posted December 4, 2021 Share Posted December 4, 2021 10 hours ago, tuanphan said: Try above code Hi, It didn't work, it makes the logo disappear on home page and when I go to another page it is way off center. Link to comment
tuanphan Posted December 8, 2021 Share Posted December 8, 2021 On 12/5/2021 at 1:39 AM, MoonMama said: Hi, It didn't work, it makes the logo disappear on home page and when I go to another page it is way off center. Don't remove any code in your current code & try above code 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
thedesigndaily Posted September 29, 2022 Share Posted September 29, 2022 On 2/7/2020 at 3:50 PM, inside_the_square said: .header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important} Hi @inside_the_square this worked great! But now my shopping cart & social icon (which were on the right) have disappeared. I've tried different header layouts w/ same result. Can you advise? Thank you in advance! Link to comment
tuanphan Posted September 30, 2022 Share Posted September 30, 2022 13 hours ago, thedesigndaily said: Hi @inside_the_square this worked great! But now my shopping cart & social icon (which were on the right) have disappeared. I've tried different header layouts w/ same result. Can you advise? Thank you in advance! 13 hours ago, thedesigndaily said: Hi @inside_the_square this worked great! But now my shopping cart & social icon (which were on the right) have disappeared. I've tried different header layouts w/ same result. Can you advise? Thank you in advance! Try changing this line .header-nav, .header-actions {visibility:hidden!important} to this .header-nav {visibility:hidden!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
thedesigndaily Posted September 30, 2022 Share Posted September 30, 2022 (edited) 12 hours ago, tuanphan said: Thank you @tuanphan! This piece did restore IG icon (on the left) and cart (on the right), but hamburger (left) disappeared. Then it randomly came back w/ no IG icon showing on mobile, and no hamburger showing on desktop. Somewhere in there, I realized my "fixed header style" was set to "scroll back" instead of "basic." When I changed it to basic, it seemed to mess up everything. I also began getting "flashes" of my old navigation bar (centered under logo) when reloading the page. I set it back to "scroll back" for now, but prefer "basic." Screenshots of everything attached, including current code being used (for this issue). I had had a piece of "hamburger code" in there previously (screenshot w/ black background); when I removed it, the icons came back, hamburger disappeared. Can send contributor invite if that would help - what's a good email? Thank you again! 12 hours ago, tuanphan said: Try changing this line .header-nav, .header-actions {visibility:hidden!important} to this .header-nav {visibility:hidden!important} Edited September 30, 2022 by thedesigndaily Link to comment
tuanphan Posted October 1, 2022 Share Posted October 1, 2022 15 hours ago, thedesigndaily said: What is your site url? 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
thedesigndaily Posted October 1, 2022 Share Posted October 1, 2022 13 hours ago, tuanphan said: What is your site url? @tuanphan https://swordfish-toucan-ymsh.squarespace.com/config/settings pass: blueangel Thank you! Link to comment
tuanphan Posted October 3, 2022 Share Posted October 3, 2022 On 10/2/2022 at 3:43 AM, thedesigndaily said: @tuanphan https://swordfish-toucan-ymsh.squarespace.com/config/settings pass: blueangel Thank you! Don't remove any code in your current code Add this to top of Custom CSS box .header-burger { 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
thedesigndaily Posted October 3, 2022 Share Posted October 3, 2022 11 hours ago, tuanphan said: Don't remove any code in your current code Add this to top of Custom CSS box .header-burger { display: block !important; } @tuanphan That worked!! Thank you so much! Very grateful! tuanphan 1 Link to comment
thedesigndaily Posted October 6, 2022 Share Posted October 6, 2022 On 10/3/2022 at 1:58 PM, thedesigndaily said: @tuanphan Thanks again for your help! One potential problem - the overlay seems to have 'disappeared.' I seem to have nowhere to put / display menu items. Can you advise? Thank you! https://swordfish-toucan-ymsh.squarespace.com/config/ pass: blueangel Link to comment
tuanphan Posted October 8, 2022 Share Posted October 8, 2022 On 10/7/2022 at 6:45 AM, thedesigndaily said: @tuanphan Thanks again for your help! One potential problem - the overlay seems to have 'disappeared.' I seem to have nowhere to put / display menu items. Can you advise? Thank you! https://swordfish-toucan-ymsh.squarespace.com/config/ pass: blueangel You mean nav items should appear under logo? 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
thedesigndaily Posted October 8, 2022 Share Posted October 8, 2022 11 hours ago, tuanphan said: You mean nav items should appear under logo? No, just looking for them to be under the "x" (when the hamburger is "open"). -- Like they would appear on mobile. 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