Custom Navigation items on individual page

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

Can you share link to 2 pages & which items you want to show on each page header, we can give the code to fix this.

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

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?

Hi @tuanphan yes that is correct 👍

Thanks

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>