Jump to content

Custom Navigation items on individual page

Recommended Posts

Site URL: http://ribetmyles.co.uk

Hi there

Wondering if anyone knows of a way I can create  custom navigation items on an individual page of my site.

Essentially my client is running a google ads campaign and has asked me to create new page with out any external links. They want the existing navigation (that currently links to different pages) to become anchor links, that link to specific parts of the webpage. (What we do, Meet us etc) which I can implement no problem through the link function. However when I do this, it then duplicates across the navigation of the whole site, which is not the desired outcome as I'd like the others to remain as page links.

Any help here would be greatly appreciated!

Thanks

Rhys

Link to comment
  • Replies 5
  • Views 354
  • Created
  • Last Reply

Top Posters In This Topic

Hi @tuanphan 

Thanks for getting back to me. 

https://www.ribetmyles.co.uk/ this is the main page where the nav links to different pages around the site.

https://www.ribetmyles.co.uk/landing this is the landing page created for the Google Ads campaign. As a short term fix I have turned off the nav completely using the code below and replaced with an image. 

<style>
  #header, header {
  display: none!important;}
</style>

Client is happy with no navigation items which is great but ideally I'd love to be able to re-instate the header used on the other pages just minus and nav items.... also the logo would need to point to this landing page rather then the homepage (ribetmyles.co.uk)

Hoping this makes sense! 

Again, thank you for any help here!

Rhys

Link to comment
On 12/18/2021 at 1:25 AM, RhysCunningham said:

Hi @tuanphan 

Thanks for getting back to me. 

https://www.ribetmyles.co.uk/ this is the main page where the nav links to different pages around the site.

https://www.ribetmyles.co.uk/landing this is the landing page created for the Google Ads campaign. As a short term fix I have turned off the nav completely using the code below and replaced with an image. 

<style>
  #header, header {
  display: none!important;}
</style>

Client is happy with no navigation items which is great but ideally I'd love to be able to re-instate the header used on the other pages just minus and nav items.... also the logo would need to point to this landing page rather then the homepage (ribetmyles.co.uk)

Hoping this makes sense! 

Again, thank you for any help here!

Rhys

Hi,

Now you want, instead of hiding whole header, now hide Navigation Items + Button + Burger menu on Landing Page Header Only. Is this right?

 

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
On 12/19/2021 at 6:24 PM, RhysCunningham said:

Hi @tuanphan yes that is correct 👍

Thanks

First, remove this code from Landing Page Header

<style>
#header, header {
  display: none!important;}
</style>

Next, use this new code

<style>
  /* hide nav */
  .header-nav-list {
    display: none;
}
  /* hide buttons */
  .header-actions {
    display: none;
}
  /* hide burger */
  .burger-box {
    display: none;
}
  /* hide footer */
  footer.sections {
  	display: none;
  }
</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

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.