luizfagundes Posted February 8 Share Posted February 8 Hi all, I used custom css to split my navigation on either side of my header, but I would like them to be aligned to the far right and far left on each side of the centered logo. My client has a personal plan so I have limited options. Any help would appreciated! https://swan-cinnamon-97fw.squarespace.com/ @media only screen and (min-width: 1030px){ .header-nav { position: absolute; margin-top:0!important; top: 1rem; } .header-nav-item:nth-of-type(1) { margin-right: 50vw!important; } .header-title { z-index: 99!important; } } This is how I'd like it to look like: Link to comment
Solution tuanphan Posted February 11 Solution Share Posted February 11 Remove your code & use this new code nav.header-nav-list>div:nth-child(1) { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } nav.header-nav-list>div:nth-child(2) { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } Also, I see your font-face code has invalid code, so I guess it didn't work on some devices paul998870 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
luizfagundes Posted February 26 Author Share Posted February 26 @tuanphan thank you so much! Can you maybe help me with another issue, please? I'm trying to add a secondary navigation to the website by using a code that keeps the last block in the footer sticky in the bottom of the screen, as seen in the attached image. However, I just realized it won't work for me because I need it to appear only in select pages and I also need to be able to change its appearance in each page. Is there an alternative approach you can share with me? Link to comment
tuanphan Posted February 29 Share Posted February 29 On 2/26/2024 at 9:20 AM, luizfagundes said: @tuanphan thank you so much! Can you maybe help me with another issue, please? I'm trying to add a secondary navigation to the website by using a code that keeps the last block in the footer sticky in the bottom of the screen, as seen in the attached image. However, I just realized it won't work for me because I need it to appear only in select pages and I also need to be able to change its appearance in each page. Is there an alternative approach you can share with me? I usually use 2 approaches to achieve this (1) Add it to page content instead of footer, then use code to Page Header Code Injection (2) Use Section Loader Plugin to build content in Not Linked Page, then use code to Page Header Code Injection to achieve this on one page You can share link to some pages & Describe desired layout, I think I can write a quick guide for you. paul998870 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
luizfagundes Posted March 5 Author Share Posted March 5 On 2/29/2024 at 5:34 AM, tuanphan said: I usually use 2 approaches to achieve this (1) Add it to page content instead of footer, then use code to Page Header Code Injection (2) Use Section Loader Plugin to build content in Not Linked Page, then use code to Page Header Code Injection to achieve this on one page You can share link to some pages & Describe desired layout, I think I can write a quick guide for you. Is there a way to achieve this with a Personal plan? I know code injection and plugins are available just for Business and above. Link to comment
tuanphan Posted March 9 Share Posted March 9 On 3/6/2024 at 6:54 AM, luizfagundes said: Is there a way to achieve this with a Personal plan? I know code injection and plugins are available just for Business and above. With Personal Plan, you can add a section to bottom of each page, then we can use CSS code to make it fixed. You can do a page first, then share url, I will check & give you 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
luizfagundes Posted March 11 Author Share Posted March 11 On 3/9/2024 at 12:23 AM, tuanphan said: With Personal Plan, you can add a section to bottom of each page, then we can use CSS code to make it fixed. You can do a page first, then share url, I will check & give you code Cool! I just added the section to the bottom of the home page, it's the white strip where it says "Destaques, Editorial, Vídeo, Foto". It also needs a 1px #E20505 top margin like the image attached. Is it possible to add that in the code? Thanks so much! Link to comment
tuanphan Posted March 14 Share Posted March 14 On 3/12/2024 at 1:07 AM, luizfagundes said: Cool! I just added the section to the bottom of the home page, it's the white strip where it says "Destaques, Editorial, Vídeo, Foto". It also needs a 1px #E20505 top margin like the image attached. Is it possible to add that in the code? Thanks so much! Edit page > Add a Block > Choose Code > Paste this code <style> article section:last-child { position: fixed; bottom: 0; left: 0; width: 100%; border-top: 1px solid #E20505; } </style> paul998870 and luizfagundes 1 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
luizfagundes Posted March 18 Author Share Posted March 18 On 3/14/2024 at 5:03 AM, tuanphan said: Edit page > Add a Block > Choose Code > Paste this code <style> article section:last-child { position: fixed; bottom: 0; left: 0; width: 100%; border-top: 1px solid #E20505; } </style> Amazing, thank you so much!! tuanphan 1 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