Link to Specific Service

Morning!

My site: http://www.empowergraphics.net/clients/harborshops/ (Work in Progress)

I have a section with my 5 services listed in one column, in style B. I would like to link from icons above, on the same page, to each specific service. For example, I’d like to be able to click on the flag icon and go directly to Yacht and Marine Services.

Could you be so kind as to explain how I can do this?

Thanks in advance!
Eric

Hi!

I think I worked out how to do this but when I do, the link is going to the top of the browser window, behind the sticky menu header. How can I make it stop so the anchor/link is below the header?

Thanks!
Eric

Hello there,

Try adding the below CSS snippet into your site’s additional CSS option (Appearance > Customize > Additional CSS).


@media only screen and (min-width:991px){
  
  a[name="shopping"],
  a[name="restaurants"],
  a[name="health"],
  a[name="yacht"],
  a[name="services"]{
    margin-bottom: 52px;
    display: block;
  }

  a[name="shopping"]:before,
  a[name="restaurants"]:before,
  a[name="health"]:before,
  a[name="yacht"]:before,
  a[name="services"]:before{
    content: '';
    height: 52px;
    width: 100%;
    display: block;
    margin-top: -92px;
  }
  
}

Regards,
Kharis

Hey Kharis:

I tried entering the code you sent and it’s still not working. If you click on the links on the home page, on the icons, the page moves up but the anchor goes behind the sticky menu area… hence blocking where the viewer should be reading…

http://www.empowergraphics.net/clients/harborshops/#health - as an example

Can you help?
Thanks!

Eric

Hello there,

Thank you for updating me.

From web inspector tool, it seems like the custom code I suggested has removed. Could you please add it again and make sure the group of CSS code is error free. The easiest way to check is by using this tool, and then paste all of your custom CSS code into the provided box.

Regards,
Kharis

Hey Kharis!

Okay… good and bad news! I checked and your code was actually there - I can send you a screen shot but don’t know how with this system…

Good news: I used the CSS checker you sent and it found an error. The links are now working.

But… they are not working in Chrome or Edge. They are working in Mozilla Firefox and Safari. I also noticed that the “To the top” arrow that appears upon page scrolling does not appear in Safari at all but does in the other 3…

Now what? :slight_smile:

Eric

Hello there,

Try to replace:


<a name="yacht"></a>

with:


<a name="yacht"><span id="yacht"></span></a>

It applies for other sections.

Regards,
Kharis

Kharis:

I tried this and it’s still not working correctly. Please advise.

it’s not moving the page up to the title, but pushing the title higher so it’s hiding behind the sticky menu… it’s also going to the body copy and not the title/top of the icon of the section.

Thanks!
Eric

Hello Eric,

Thank you for getting back to me. I am taking another look now and will update you ASAP.

Regards,
Kharis

Hello there,

Please try to replace the CSS code I suggested in this thread with this one:


@media only screen and (min-width:991px){
  
  a[name="shopping"],
  a[name="restaurants"],
  a[name="health"],
  a[name="yacht"],
  a[name="services"]{
    margin-bottom: 52px;
    display: block;
    position: relative;
  }

  a[name="shopping"]:before,
  a[name="restaurants"]:before,
  a[name="health"]:before,
  a[name="yacht"]:before,
  a[name="services"]:before{
    content: '';
    height: 52px;
    width: 100%;
    display: block;
    margin-top: -92px;
  }
  
  
  a[name="shopping"] span#shopping,
  a[name="restaurants"] span#restaurants,
  a[name="health"] span#health,
  a[name="yacht"] span#yacht,
  a[name="services"] span#services{
    margin-top: -92px;
    width: 921px;
    height: 92px;
    display: inline-block;
  }  
  
  
}

Let me know if it does anything.

Regards,
Kharis

Hey Kharis:

I tried this and… it’s working with those 5, but I added a few more links to specific locations on pages and… they are again going up behind the sticky menu. Do we need to add CSS for every instance? I’ve done other sites with sticky menus and never had this issue…

What do you suggest?

Thanks!
Eric

HELLO!!

Anyone going to answer this for me??? I’m still looking for a solution!!

Thanks!
Eric