Jump to content

Selective Secondary Navigation

Recommended Posts

Site URL: https://blackburnagri.squarespace.com/

Hi!

I'm after a little help with setting up some custom code on a website for a client. I'm using the Impact theme, and am hoping to be able to get my hands on some custom code that toggles the visibility of the secondary navigation to hide on all core pages and only appear on service relevant pages (specifically; Native VegetationEPBC Survey/ ReportFinancial ModellingBusiness Planning & Application Assistance.

Also, I'd like to place a coloured bar between the body area and the footer area as attached.

Any help would be greatly appreciated!!

Mockup.jpg

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Can you describe in detail first question?

Question 2. Add this to Home > Design > Custom CSS

footer.Footer:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/12/squarespace-2-languages-sites.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 20px;
    display: block;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
18 hours ago, tuanphan said:

Can you describe in detail first question?

Question 2. Add this to Home > Design > Custom CSS


footer.Footer:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/12/squarespace-2-languages-sites.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 20px;
    display: block;
}

 

Thanks for answering question 2 for me!

The first requirement is to have the blue secondary navigation only visible on the pages that it is relevant to — ie; Native Vegetation, EPBC Survey/Report, Financial Modelling, Business Planning, & Application Assistance pages — but hidden on all other pages. Is this possible?

Thanks again!

Link to comment

To hide blue secondary nav on One Page, add this to Page Settings > Advanced > Header

<style>
  header.Header.Header--bottom.Header--overlay {
    display: none;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
22 hours ago, tuanphan said:

Can you describe in detail first question?

Question 2. Add this to Home > Design > Custom CSS


footer.Footer:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/12/squarespace-2-languages-sites.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 20px;
    display: block;
}

 

This has worked beautifully except for one detail; it's placing the default .png perfectly fine until I replace the url with the image I wish to use and then not displaying at all. URL link is https://pasteboard.co/J2QoWRg.jpg (attached below)

BLK footer colour band.jpg

Link to comment
19 hours ago, tuanphan said:

To hide blue secondary nav on One Page, add this to Page Settings > Advanced > Header


<style>
  header.Header.Header--bottom.Header--overlay {
    display: none;
}
</style>

 

Hi tuaphan!

Thanks so much for your help so far, everything has been working great, however I have encountered an issue when viewing the website while not logged in, this navigation code seems to get a bit confused. It seems to be hiding the nav on all of the pages except the about page.

The sitemap should look as follows:
• Home (no secondary nav)
• Our Services (no secondary nav)
        - Native Vegetation (visible secondary nav)
        - EPBC Survey/Report (visible secondary nav)
        - Financial Modelling (visible secondary nav)
        - Business Planning (visible secondary nav)
        - Application Assistance (visible secondary nav)
• About Us (no secondary nav)
• Contact Us (no secondary nav)

The sitemap currently looks as follows:
• Home (no secondary nav)
• Our Services (no secondary nav)
        - Native Vegetation (no secondary nav)
        - EPBC Survey/Report (no secondary nav)
        - Financial Modelling (no secondary nav)
        - Business Planning (no secondary nav)
        - Application Assistance (no secondary nav)
• About Us (visible secondary nav)
• Contact Us (visible secondary nav)

I have used your code snippet on the home & services pages which both work fine. I removed the '--overlay' parameter for the about us and contact us page, which appear perfectly fine when previewing the page when logged in, but not appearing correctly while not logged in.

Cheers,
Luke

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.