Add Secondary or Footer Navigation to 7.1

How do add a secondary or footer navigation in 7.1? 

This was so easy in 7.0 and cannot find anything for 7.1

Only way to do it is with text links. See SquareSpace Support Article.

This text link method isn't very convenient for developers... Text doesn't style the same way Navigation does -- doesn't take into account spacing between links. 🙃

On 8/26/2020 at 4:49 PM, keymistress said:

This text link method isn't very convenient for developers... Text doesn't style the same way Navigation does -- doesn't take into account spacing between links. 🙃

Can you describe in detail? We can give the code to make style same as navigation

Hi all,

I need some help with this too! I am using a text block to add a "footer navigation" but I'm having some trouble w/ the styles. I got the spacing to look good but can anyone help remove the text-decoration underline? I cannot get it to disappear! I basically want it to mock the header nav.

Look at the FOOTER:

https://redesign-90-day-biz.squarespace.com/ 

pw:  WhorunTheWorld?

Here is the css I'm using: 

/* FOOTER  */
footer h3 a:link {
text-decoration: none!important;}
footer h3 a:visited {
text-decoration: none!important;}
footer h3 a:hover {
text-decoration: none!important;}
footer h3 a:active  {
text-decoration: none!important;}

footer h3 a:not(:first-child) {margin-left: 2.5vw;}

It's using a custom font, but that shouldn't effect the text-decoration.

Thanks!

Rachel  

12 hours ago, raeroshow said:

Hi all,

I need some help with this too! I am using a text block to add a "footer navigation" but I'm having some trouble w/ the styles. I got the spacing to look good but can anyone help remove the text-decoration underline? I cannot get it to disappear! I basically want it to mock the header nav.

Look at the FOOTER:

https://redesign-90-day-biz.squarespace.com/ 

pw:  WhorunTheWorld?

Here is the css I'm using: 

/* FOOTER  */
footer h3 a:link {
text-decoration: none!important;}
footer h3 a:visited {
text-decoration: none!important;}
footer h3 a:hover {
text-decoration: none!important;}
footer h3 a:active  {
text-decoration: none!important;}

footer h3 a:not(:first-child) {margin-left: 2.5vw;}

 

It's using a custom font, but that shouldn't effect the text-decoration.

Thanks!

Rachel  

It is background image

footer.sections a {
    background-image: none !important;
}

SS 7.1 use background image CSS to set underline

Thank you! That worked - I can't believe i didn't find that myself. Thanks again.

@tuanphan If you have the main nav menu code I'd love to get my hands on that! Thanks! 

11 hours ago, MelissaU said:

@tuanphan If you have the main nav menu code I'd love to get my hands on that! Thanks! 

Hi. What is your problem? Can you share site url?

@tuanphan do you know if it's possible to create a navigation menu that wraps around the centered site logo? Before I'd just use a primary nav menu on the left and secondary nav menu on the right. Now it's almost impossible. 

11 minutes ago, alexis.coates said:

@tuanphan do you know if it's possible to create a navigation menu that wraps around the centered site logo? Before I'd just use a primary nav menu on the left and secondary nav menu on the right. Now it's almost impossible. 

You mean: Left menu - Logo - Right Menu?

3 minutes ago, tuanphan said:

You mean: Left menu - Logo - Right Menu?

Yes!

2 minutes ago, alexis.coates said:

Yes!

This require CSS + JS (Business Plan or higher). Can you share site url?

2 minutes ago, tuanphan said:

This require CSS + JS (Business Plan or higher). Can you share site url?

https://echidna-dog-ar77.squarespace.com/
pw: help!

On 11/6/2020 at 4:35 PM, alexis.coates said:

https://echidna-dog-ar77.squarespace.com/
pw: help!

Sorry, missing your comment. Do you still need help with this?

On 10/6/2020 at 1:16 AM, tuanphan said:

It is background image

footer.sections a {
    background-image: none !important;
}

SS 7.1 use background image CSS to set underline

I made it to remove the underline but the color still stay blue. Is there any way to change the color (e.g. black)? Thanks in advance.

1 hour ago, dolceannawu said:

I made it to remove the underline but the color still stay blue. Is there any way to change the color (e.g. black)? Thanks in advance.

Use this

footer.sections a {
    background-image: none !important;
	color: black !important;
}

Anyone have other ideas / workarounds for adding a traditional secondary navigation in 7.1? I've used text and icon links to hyperlink to content on the same or different pages, but it's not as simple as a more traditional secondary nav on main nav hover. Any ideas appreciated. https://cat-walrus-dgh4.squarespace.com/

On 6/30/2021 at 2:26 AM, AdmiralTheatre said:

Anyone have other ideas / workarounds for adding a traditional secondary navigation in 7.1? I've used text and icon links to hyperlink to content on the same or different pages, but it's not as simple as a more traditional secondary nav on main nav hover. Any ideas appreciated. https://cat-walrus-dgh4.squarespace.com/

You can try mega menu.

Thank you! I purchased the mega menu and the step 1 code is missing from the product page, so emailed Will to get it. I appreciate the suggestion and will let you know how it all works out.

Place the code below to the Footer Code Injection.

Hey @tuanphan - This is probably a dumb question but i can't seem to figure it out. I am using text hyperlinks to create my footer nav since there is no easy way to do it anymore. However, it doesn't look great on mobile. How do I make this work?

https://contrabass-caper-5n75.squarespace.com/
pass: riad

On 9/9/2021 at 10:17 AM, graceandoak said:

Hey @tuanphan - This is probably a dumb question but i can't seem to figure it out. I am using text hyperlinks to create my footer nav since there is no easy way to do it anymore. However, it doesn't look great on mobile. How do I make this work?

https://contrabass-caper-5n75.squarespace.com/
pass: riad

Add to Design > Custom CSS

/* Mobile footer links */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1631156718616_16973 h4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
div#block-yui_3_17_2_1_1631156718616_16973 a + strong {
    display: none;
}
div#block-yui_3_17_2_1_1631156718616_16973 a {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
}
}

6 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile footer links */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1631156718616_16973 h4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
div#block-yui_3_17_2_1_1631156718616_16973 a + strong {
    display: none;
}
div#block-yui_3_17_2_1_1631156718616_16973 a {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
}
}

OH wow - thank you so much! Really appreciate this.

I have an issue with my site. I applied the code in the footer as well as in the CSS for my product. My issue is that when the site is viewed from a Mobile phone the letters are not formatted correctly as they are when viewed from a desktop site. My first two products format correctly but the third one does not. I've tried moving the order and still the Kaidence Box product formats incorrectly. I've even tried removing "ence" from Kaidence and the formatting remains off. It still shows the "e" on the line below instead of with "Kaidence. Please Help

The website is Thefoundco.com

Password found1