azubair653 Posted August 3, 2023 Share Posted August 3, 2023 (edited) 12 hours ago, tuanphan said: Which code did you use to add Search bar on right of logo? I guess we will need to tweak that code sure heres the code @tuanphan I put this in footer <!-- search into header ---> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> $(function(){ let searchBlock = $('#block-yui_3_17_2_1_1686595653374_1657').attr('id','').addClass('header-search-bar'); $(searchBlock).insertAfter($('.header-title-nav-wrapper')); $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content')); }) </script> <!-- search into header ---> css .header-search-bar{ margin: 0 0 0 2.5vw; @media(max-width:799px){ display:none; } } Edited August 3, 2023 by azubair653 Link to comment
tuanphan Posted August 4, 2023 Share Posted August 4, 2023 20 hours ago, azubair653 said: sure heres the code @tuanphan I put this in footer <!-- search into header ---> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> $(function(){ let searchBlock = $('#block-yui_3_17_2_1_1686595653374_1657').attr('id','').addClass('header-search-bar'); $(searchBlock).insertAfter($('.header-title-nav-wrapper')); $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content')); }) </script> <!-- search into header ---> css .header-search-bar{ margin: 0 0 0 2.5vw; @media(max-width:799px){ display:none; } } Change this line $(searchBlock).insertAfter($('.header-title-nav-wrapper')); to this $(searchBlock).insertAfter($('.header-nav')); 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
InnateStudio Posted August 30, 2023 Share Posted August 30, 2023 Hi - another question on split navigation. I'd like to have the split navigation automatically resize and be centered vertically on the logo. Here's the site (business account): innate-studio.com Thank you! Link to comment
InnateStudio Posted August 30, 2023 Share Posted August 30, 2023 I'd also like to have equal spacing between the navigation elements. Thank you! Link to comment
tuanphan Posted September 3, 2023 Share Posted September 3, 2023 On 8/31/2023 at 4:18 AM, InnateStudio said: I'd also like to have equal spacing between the navigation elements. Thank you! It looks fine to me. Which screen sizes do you see problem? 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
aquariusgarcelon Posted September 21, 2023 Share Posted September 21, 2023 @tuanphan can you help me with a similar issue? I want the mobile menu to have the logo in the center, and I want to hide the hamburger and split the menu. there are only two menu items. Here is the site and PW: https://themainestage.squarespace.com/ backstage Site is on Business plan This is what I want it to look like. Menu Items at the side and the logo and tagline centered. Link to comment
laurenhauss Posted September 22, 2023 Share Posted September 22, 2023 Hi Tuanphan. Thanks for this code, I used it and it works on desktop, but still showing on real mobile (on my phone, not just on squarespace mobile mode). Can you help? Thank you. Site: https://youngharvestfarm.squarespace.com/ password: young Link to comment
tuanphan Posted September 25, 2023 Share Posted September 25, 2023 On 9/22/2023 at 12:04 AM, aquariusgarcelon said: @tuanphan can you help me with a similar issue? I want the mobile menu to have the logo in the center, and I want to hide the hamburger and split the menu. there are only two menu items. Here is the site and PW: https://themainestage.squarespace.com/ backstage Site is on Business plan This is what I want it to look like. Menu Items at the side and the logo and tagline centered. Hi, Do this on Mobile only or both desktop + mobile? If mobile only, use this code to Website > Website Tools (under Not Linked) > Custom CSS @media screen and (max-width:767px) { .header-display-desktop { } .header-nav { display: flex !important; width: 70px !important; flex: 0 0 70px !important; flex-direction: column !important; } .header-burger { display: none !important; } .header-nav-item.header-nav-item--collection:last-child { position: absolute; right: 0vw; z-index: 999999; } .header-title-logo { padding: 0 !important; text-align: center !important; width: 100% !important; } .header-title-nav-wrapper { flex: 1 0 100% !important; } .header-title { max-width: 200px; flex: 1 0 70% !important; width: 70% !important; } } aquariusgarcelon 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 September 25, 2023 Share Posted September 25, 2023 On 9/23/2023 at 1:57 AM, laurenhauss said: Hi Tuanphan. Thanks for this code, I used it and it works on desktop, but still showing on real mobile (on my phone, not just on squarespace mobile mode). Can you help? Thank you. Site: https://youngharvestfarm.squarespace.com/ password: young You mean remove menu items on mobile or what is problem? 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
laurenhauss Posted September 25, 2023 Share Posted September 25, 2023 3 hours ago, tuanphan said: You mean remove menu items on mobile or what is problem? Yes, I meant that I don't want those navigation titles (the ones between the shopping cart and the hamburger) to show in the top area on mobile. I want to see the hamburger nav only (and the navigation will show when the user clicks the hamburger instead). Thank you. Link to comment
laurenhauss Posted September 25, 2023 Share Posted September 25, 2023 Nevermind, I figured it out! @media screen and (max-width:767px) { .header-nav-list { display:none; }} Thanks! tuanphan 1 Link to comment
aquariusgarcelon Posted September 25, 2023 Share Posted September 25, 2023 4 hours ago, tuanphan said: Hi, Do this on Mobile only or both desktop + mobile? If mobile only, use this code to Website > Website Tools (under Not Linked) > Custom CSS @media screen and (max-width:767px) { .header-display-desktop { } .header-nav { display: flex !important; width: 70px !important; flex: 0 0 70px !important; flex-direction: column !important; } .header-burger { display: none !important; } .header-nav-item.header-nav-item--collection:last-child { position: absolute; right: 0vw; z-index: 999999; } .header-title-logo { padding: 0 !important; text-align: center !important; width: 100% !important; } .header-title-nav-wrapper { flex: 1 0 100% !important; } .header-title { max-width: 200px; flex: 1 0 70% !important; width: 70% !important; } } Thank you so much @tuanphan, this worked! tuanphan 1 Link to comment
SashaMiana Posted October 6, 2023 Share Posted October 6, 2023 @tuanphan HELP! I used this code for split navigation and it looks amazing, however on 2 of my pages (Services & Contact), the right 3 navigation items disappear. My client is adament about having it this way so I really need to be able to fix it. Website: www.laurenandalexisphoto.com PW: lap123 Link to comment
tuanphan Posted October 9, 2023 Share Posted October 9, 2023 On 10/7/2023 at 2:06 AM, SashaMiana said: @tuanphan HELP! I used this code for split navigation and it looks amazing, however on 2 of my pages (Services & Contact), the right 3 navigation items disappear. My client is adament about having it this way so I really need to be able to fix it. Website: www.laurenandalexisphoto.com PW: lap123 It shows fine to me 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
SashaMiana Posted October 9, 2023 Share Posted October 9, 2023 (edited) On 10/6/2023 at 2:06 PM, SashaMiana said: @tuanphan If you click on the photography page, the right three menu items are not at the top. Same for the contact page! I don't know why. On 10/6/2023 at 2:06 PM, SashaMiana said: HELP! I used this code for split navigation and it looks amazing, however on 2 of my pages (Services & Contact), the right 3 navigation items disappear. My client is adament about having it this way so I really need to be able to fix it. Website: www.laurenandalexisphoto.com PW: lap123 Edited October 10, 2023 by SashaMiana Link to comment
SashaMiana Posted October 11, 2023 Share Posted October 11, 2023 @tuanphan any thoughts on this? Link to comment
tuanphan Posted October 13, 2023 Share Posted October 13, 2023 On 10/11/2023 at 11:03 PM, SashaMiana said: @tuanphan any thoughts on this? Add this to Custom CSS box to make right items appear /* make right 3 items appear */ .header-nav-item a { opacity: 1 !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
SashaMiana Posted October 16, 2023 Share Posted October 16, 2023 @tuanphan for some reason that still didn't work 😞 Link to comment
SashaMiana Posted October 18, 2023 Share Posted October 18, 2023 @tuanphan Nevermind, I added the <style> to the beginning and end and it worked! Thanks! Sasha tuanphan 1 Link to comment
one-over-four Posted June 17 Share Posted June 17 Hi @tuanphan, Page URL: https://studiotahini.squarespace.com/ I'd like to do the same on my site, however, with 3 on the left and 2 on the right (next to the Contact button). Would you be able to supple the Code for this, please? Thanks, Christopher Link to comment
tuanphan Posted June 19 Share Posted June 19 On 6/18/2024 at 1:13 AM, one-over-four said: Hi @tuanphan, Page URL: https://studiotahini.squarespace.com/ I'd like to do the same on my site, however, with 3 on the left and 2 on the right (next to the Contact button). Would you be able to supple the Code for this, please? Thanks, Christopher I just wrote a quick guide 2 days ago, you can follow it. In case you can't make it work, let me know, I will exact code for your case. 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
one-over-four Posted June 19 Share Posted June 19 Hi @tuanphan, In terms of positioning of the links, that has worked. However, the font styles need now updating. How do I do that? Thanks, Christopher Link to comment
tuanphan Posted June 21 Share Posted June 21 On 6/19/2024 at 6:46 PM, one-over-four said: Hi @tuanphan, In terms of positioning of the links, that has worked. However, the font styles need now updating. How do I do that? Thanks, Christopher You can use this to Custom CSS box div.header-nav-item * { font-size: 15px !important; } one-over-four 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment