CalixtoD Posted December 13, 2020 Share Posted December 13, 2020 @creedon Hi, yeah i had changed that value to get the navigation in line with 'studio' in the logo. Originally I had changed the top value in the split navigation code to achieve this but thought i'd try with the line hight in the site navigations instead to see if it helped with the issues i had. Have reverted back to using the top value in the below code to achieve it. Both seem to make no difference to helping with the issues. /*Make split navigation*/ .header-nav { position: absolute; top: 130px; bottom: 0; margin-top: 0!important; } .header-nav-item:nth-of-type(2) { margin-right: 345px!important; } Link to comment
alana Posted January 29, 2021 Share Posted January 29, 2021 Hi @tuanphan, I'm looking to have the primary navigation split and show on either side of the centered logo on my website. Heres the site: https://antelope-yellow-wjax.squarespace.com/ Password: test What code do I need to achieve this? Would you be able to help me? Thanks so much. Link to comment
creedon Posted January 29, 2021 Share Posted January 29, 2021 @alana You don't need any code. Split your links across the Primary Navigation and Secondary Navigation in Pages. Then go to Design > Site Styles. Click on each set of navigation links. Set their placement with the settings offered on the left. Save your changes. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alana Posted January 29, 2021 Share Posted January 29, 2021 8 minutes ago, creedon said: @alana You don't need any code. Split your links across the Primary Navigation and Secondary Navigation in Pages. Then go to Design > Site Styles. Click on each set of navigation links. Set their placement with the settings offered on the left. Save your changes. Let us know how it goes. Thanks @creedon! I had it set up like that beforehand, but now the client is wanting to add a few important links to the top right corner in a bar above the nav and logo. So now I've got the secondary nav set to top right for that. I've got the logo set to bottom center and now I'm hoping to find a way to have the primary nav be centered and wrap around that. Link to comment
creedon Posted January 29, 2021 Share Posted January 29, 2021 (edited) @alana Add the following to Design > Custom CSS. /* hide header bottom left initially while the menus are manipulated */ .ancillary-header-primary-nav-position-bottom-left.has-primary-nav [data-nc-base="header"] [data-nc-container="bottom-left"][data-nc-container] { display : none; } Add the following to Store Settings > Advanced > Page Header Code Injection. <script> $( document ).ready ( function ( ) { /* split half of primary navigation bottom left position elements into bottom right for v7.0 site using Brine template keep in mind that SS editor doesn't know anything about this so if you try to edit right bottom it's a waste of effort as far as menu items go if you put something else into the right bottom then the split part from the left bottom will be added */ let $headerBottomLeft = $( '.Header--bottom [data-nc-container="bottom-left"]' ); let $headerBottomRight = $headerBottomLeft .siblings ( '[data-nc-container="bottom-right"]' ); let $nav = $( 'nav', $headerBottomLeft ); let $navClone = $nav.clone ( ); $headerBottomRight.append ( $navClone ); let $e = $( '.Header-nav-inner', $nav ).children ( ); const l = $e.length; const i = Math.ceil ( l / 2 ); $e.slice ( i ).remove ( ); // remove some children from left nav $e = $( '.Header-nav-inner', $navClone ).children ( ); $e.slice ( 0, i ).remove ( ); // remove some children from right nav $headerBottomLeft.css ( 'display', 'flex' ); $headerBottomRight.css ( 'display', 'flex' ); } ); </script> Let us know how it goes. Edited February 1, 2021 by creedon version 2 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alana Posted January 31, 2021 Share Posted January 31, 2021 22 hours ago, creedon said: @alana Add the following to Design > Custom CSS. /* hide header bottom left initially while the menus are manipulated */ .ancillary-header-primary-nav-position-bottom-left.has-primary-nav [data-nc-base="header"] [data-nc-container="bottom-left"][data-nc-container] { display: none; } Add the following to Store Settings > Advanced > Page Header Code Injection. <script> $( ( ) => { /* split half of primary navigation bottom left position elements into bottom right for v7.0 site using Brine template keep in mind that SS editor doesn't know anything about this so if you try to edit right bottom it's a waste of effort as far as menu items go if you put something else into the right bottom then the split part from the left bottom will be added */ let $headerBottomLeft = $( '.Header--bottom [data-nc-container="bottom-left"]' ); let $headerBottomRight = $headerBottomLeft .siblings ( '[data-nc-container="bottom-right"]' ); let $nav = $( 'nav', $headerBottomLeft ); let $navClone = $nav.clone ( ); $headerBottomRight.append ( $navClone ); let $e = $( '.Header-nav-inner', $nav ).children ( ); const l = $e.length; const i = Math.ceil ( l / 2 ); $e.slice ( i ).remove ( ); // remove some children from left nav $e = $( '.Header-nav-inner', $navClone ).children ( ); $e.slice ( 0, i - 1 ).remove ( ); // remove some children from right nav $headerBottomLeft.css ( 'display', 'flex' ); $headerBottomRight.css ( 'display', 'flex' ); } ); </script> Let us know how it goes. Hi @creedon, Thanks so much! I've added this in but unfortunately it didn't seem to work. This is what I'm getting: Link to comment
creedon Posted January 31, 2021 Share Posted January 31, 2021 1 hour ago, alana said: I've added this in but unfortunately it didn't seem to work. I've updated my code but I don't know if it will help. Please replace the code with the new code. What I discovered is that SS is running some code after the previous code ran to build the menus. This wasn't apparent when I created the code. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alana Posted February 1, 2021 Share Posted February 1, 2021 23 hours ago, creedon said: I've updated my code but I don't know if it will help. Please replace the code with the new code. What I discovered is that SS is running some code after the previous code ran to build the menus. This wasn't apparent when I created the code. Let us know how it goes. Thanks @creedon! Just tried it and this is now what I get (keeping the primary nav position in site styles set to left): This is what it looks like if i change the placement of primary nav to bottom right: and this centered: Link to comment
creedon Posted February 1, 2021 Share Posted February 1, 2021 @alana Moving the primary navigation from the bottom left will render the code completely useless. The code, if it can work, depends on the primary navigation being bottom left. It also would work best, again, if it can work, with the bottom right not having anything assigned. If you can set it up like it was when you made your help request, I can see if my code change made any difference. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alana Posted February 1, 2021 Share Posted February 1, 2021 12 minutes ago, creedon said: @alana Moving the primary navigation from the bottom left will render the code completely useless. The code, if it can work, depends on the primary navigation being bottom left. It also would work best, again, if it can work, with the bottom right not having anything assigned. If you can set it up like it was when you made your help request, I can see if my code change made any difference. Yep, It is back set up the same way as when I made my help request (bottom left primary nav, branding bottom center) creedon 1 Link to comment
creedon Posted February 1, 2021 Share Posted February 1, 2021 @alana You also removed the jQuery library that the code depends on. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alana Posted February 1, 2021 Share Posted February 1, 2021 8 minutes ago, creedon said: @alana You also removed the jQuery library that the code depends on. oh yikes..that'll do it. Just added it back in Link to comment
alana Posted February 1, 2021 Share Posted February 1, 2021 8 hours ago, alana said: oh yikes..that'll do it. Just added it back in Hi @creedon, I think I found what I needed to change to get your code to work. I had the header layout set to stacked... so I just changed it (header:top, right layout) to horizontal instead under site styles. It didn't work with the navigation set to bottom left, so I tried bottom right (just to see what would happen) and for some reason that worked! Does that look/sound right? Thanks so much for all your help and time btw I greatly appreciate it. Link to comment
creedon Posted February 1, 2021 Share Posted February 1, 2021 @alana Almost there. I've updated my code with minor changes so replace what you have with it. Also you need to go into Custom CSS and remove the following. .Header-nav--primary .Header-nav-item:nth-child(1) { display:none !important; } It is interfering with the navigation menu items. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
alana Posted February 2, 2021 Share Posted February 2, 2021 3 hours ago, creedon said: @alana Almost there. I've updated my code with minor changes so replace what you have with it. Also you need to go into Custom CSS and remove the following. .Header-nav--primary .Header-nav-item:nth-child(1) { display:none !important; } It is interfering with the navigation menu items. Let us know how it goes. Updated + removed! Seems to be working well. Thank you so much. creedon 1 Link to comment
Sanny Posted May 30, 2021 Share Posted May 30, 2021 Hey, I'm looking for help with splitting the navigation and placing the logo in the center. Here is my website: www.niksfineart.com. Can I please get some help, thanks in advance. Link to comment
creedon Posted May 30, 2021 Share Posted May 30, 2021 @Sanny Did you try the instructions from the Jan. 28th post? I'd add to those instructions. Click on the logo, the styles will change and you can select the placement for the logo. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Swebberdesign Posted June 17, 2021 Share Posted June 17, 2021 @tuanphan Can you help me get my menu items on either side of my logo as well. https://bullard-tavern-pdx.squarespace.com/ Password: working Here is a screenshot of what I want it to look like. Link to comment
tuanphan Posted June 18, 2021 Share Posted June 18, 2021 13 hours ago, Swebberdesign said: @tuanphan Can you help me get my menu items on either side of my logo as well. https://bullard-tavern-pdx.squarespace.com/ Password: working Here is a screenshot of what I want it to look like. Add to Code Injection Header. If the code doesn't work, keep the code & let me know. We can check it again easier <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> var _0x20a8=['clone','57877tMZLUc','html','786775IhrhgP','131zUKnWi','2341kluzGo','36439beuZcw','45608JVxnts','ready','200Sowgxs','.header-display-desktop\x20nav.header-nav-list','402460LNCYul','3223JsvhXV'];var _0x30aec1=_0x39be;function _0x39be(_0x222ad5,_0x201e72){return _0x39be=function(_0x20a8d8,_0x39be34){_0x20a8d8=_0x20a8d8-0x1e1;var _0x2ec001=_0x20a8[_0x20a8d8];return _0x2ec001;},_0x39be(_0x222ad5,_0x201e72);}(function(_0x169729,_0x16a9cd){var _0x37a587=_0x39be;while(!![]){try{var _0x2c2587=parseInt(_0x37a587(0x1e5))+-parseInt(_0x37a587(0x1e7))+-parseInt(_0x37a587(0x1ea))+-parseInt(_0x37a587(0x1eb))+parseInt(_0x37a587(0x1e9))*parseInt(_0x37a587(0x1ed))+-parseInt(_0x37a587(0x1e8))*-parseInt(_0x37a587(0x1e3))+parseInt(_0x37a587(0x1e2));if(_0x2c2587===_0x16a9cd)break;else _0x169729['push'](_0x169729['shift']());}catch(_0x26f68c){_0x169729['push'](_0x169729['shift']());}}}(_0x20a8,0x75a88),jQuery(document)[_0x30aec1(0x1ec)](function(_0x2f8ec0){var _0x1ed024=_0x30aec1,_0x5f2b00=_0x2f8ec0(_0x1ed024(0x1e1))[_0x1ed024(0x1e4)]();_0x2f8ec0('.header-display-desktop\x20.header-actions--right')[_0x1ed024(0x1e6)](_0x5f2b00);})); </script> <style> .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;} .header-nav-item:nth-child(n+3) { margin-right: 1.5vw; } </style> 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
Swebberdesign Posted June 18, 2021 Share Posted June 18, 2021 It worked but I lost my button, some of them turned white and they are really far to the sides. Can you look at it again? Trying to get as close to this as possible. Link to comment
tuanphan Posted June 19, 2021 Share Posted June 19, 2021 18 hours ago, Swebberdesign said: It worked but I lost my button, some of them turned white and they are really far to the sides. Can you look at it again? Trying to get as close to this as possible. Don't remove above code & add this to Code Injection Header <style> .header-nav-item a { color: #c59014; } .header-nav-wrapper { text-align: right; } .header-actions.header-actions--right { text-align: left !important; justify-content: flex-start; } </style> 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
Swebberdesign Posted June 21, 2021 Share Posted June 21, 2021 Can you help me move those titles in a little closer to the logo and bring my "reserve" button back? Link to comment
tuanphan Posted June 22, 2021 Share Posted June 22, 2021 17 hours ago, Swebberdesign said: Can you help me move those titles in a little closer to the logo and bring my "reserve" button back? Remove above script/style code, I will check again 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
Niamhhi Posted July 6, 2021 Share Posted July 6, 2021 @tuanphan Could you help me with this please? www.morrisseysofdoonbeg.ie Link to comment
tuanphan Posted July 7, 2021 Share Posted July 7, 2021 3 hours ago, Niamhhi said: @tuanphan Could you help me with this please? www.morrisseysofdoonbeg.ie Hi. I see no navigation here. Can you check it again? 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