Homepage Navigation anchor links in Debut theme?

Solved
Highlighted
Tourist
6 0 1

Hi there,

My website is www.bonniebarko.com and I would like some coding help if possible. I would like to create an anchor link from 'Services + Prices' in the navigation so when someone clicks it, it takes them down the homepage to the 'Services' section. Can anyone help me with this? I am using the Debut theme. I have seen a couple of other posts regarding this, but none of the code works in the Debut theme. Thanks!

0 Likes
Highlighted
Shopify Partner
14 4 18

Hi @BonnieBarko 

 

You will need to enclose the section within a div with an id first:

 

<div id="services">

</div>

Your section code is between the opening and closing of this div.

 

You then point the Services + Products navigation link to /#services

0 Likes
Highlighted
Tourist
6 0 1

@PaulOwens Thanks so much. Where exactly do I put that first bit of code? I'm new to coding! :D

0 Likes
Highlighted
Tourist
6 0 1

@PaulOwens  So I didn't edit the pre-existing code. What I did, was create two custom content (html) sections and put one above and one below the 'services' section and split the code you gave me. It is working! YAY! But there is now a lot more white space above and below the 'services' section. Is there any way I can fix this? Or should I remove the 'custom content' blocks and edit the pre-existing code? I really appreciate you taking the time to help! :D

0 Likes
Highlighted
Shopify Partner
14 4 18

@BonnieBarko when you have added the custom content sections it has automatically added padding top and bottom of 55px, which is where the white space is coming from as part of your theme. So editing the pre-existing section code would be the better alternative.

 

Good to see its working so far!

0 Likes
Highlighted
Tourist
6 0 1

@PaulOwens wrote:

Hi @BonnieBarko 

 

You will need to enclose the section within a div with an id first:

 

<div id="services">

</div>

Your section code is between the opening and closing of this div.

 

You then point the Services + Products navigation link to /#services


@PaulOwens can you tell me wherein my code that I put this code? I looked in all the different sections, but not sure where it should go.

0 Likes
Highlighted
Shopify Partner
14 4 18

This is an accepted solution.

Looking at your website I will guess and say you are using the Debut theme section feature-columns.liquid to display your SERVICES + PRICES.

 

You will find this in the Sections part of your theme.

 

At the top of this section you will find <div class="page-width">

 

Change this to <div  id="services" class="page-width">

 

Just be aware this is fine as long as you don't add another feature column section to your homepage.

0 Likes
Highlighted
Tourist
6 0 1

Thank you so much! @PaulOwens 

Highlighted
New Member
1 0 0

What would we do if we have multiple uses of the same section style? how could I add anchor links to the different sections?

0 Likes
Highlighted
Explorer
97 0 23

@am36 any luck with this? I'm also wondering how to do it when a section is used multiple times.

 

I am puttin sections into custom pages and want to link to those sections via the main menu.

0 Likes