How to Create a Menu Link to an Anchor The Footer?

Options
visioncraft
visioncraft Member Posts: 153 Learner
edited September 2023 in Ask a Question

I am creating a website where the 'contact us' section is going to appear at the bottom of every single page, so it's being placed in the site's footer.

The site's main navigation menu has a little 'contact us' link, which should just scroll down to the 'contact' section at the bottom of whatever page the visitor is in.

I thought this would be super easy to do with Duda. And then I found out that Duda does not allow us to create anchors in the footer…

Apart from going into Dev Mode and coding the anchor and the link by hand, is there a 'Duda way' of doing this that I'm missing? Feels like I'm overlooking something…

Tagged:

Best Answer

  • visioncraft
    visioncraft Member Posts: 153 Learner
    Answer ✓
    Options

    Thank you for the suggestion, @courtneyquaresimo ! In my case, I need the link to work in all pages of the site, so this would mean having to manually add the row/section above the footer on every page - not the easiest solution to implement and maintain.

    The following worked well for my particular case:

    1. Look up the ID of an element/widget in the footer, which we can use as the 'anchor'
    2. Add an HTML Widget to the navigation header - this will be our 'contact us' link.
    3. Manually code the link in the widget, using the ID of the footer widget as the href attribute.

    As an example, if I wanted to link the words "contact us" to a widget in the footer with an `id="12345678", this would be the code of the HTML Widget:

    <a href="#12345678">contact us</a>

    We can then style the link using simple CSS, so it matches the other links in the navigation menu.

    Hopefully this might help others looking for a similar solution!

Answers

  • visioncraft
    visioncraft Member Posts: 153 Learner
    Options

    Wow, I just found a related feature request from way back in 2021… 😭

    Duda Pros, HELP! Are you able to suggest a workaround?…

  • Aj_Cre8
    Aj_Cre8 Member Posts: 672 MVP
    Options

    You are correct. Without going into the code, you cannot add a anchor to the footer. @ScottyStrehlow, can you verify from the team if we can use the #bottom anchor similar to #top.

  • courtneyquaresimo
    courtneyquaresimo Member Posts: 184 Leader
    Options

    Ive gotten around this by adding a row right above the footer with a small spacer in it and making that row the anchor. It will still pull the user to the bottom where they can view the contact info. I hope this workaround helps!

  • courtneyquaresimo
    courtneyquaresimo Member Posts: 184 Leader
    Options

    @visioncraft was thinking about this a little more. May I ask why you dont want to have an actual contact page?

  • JulieP
    JulieP Member Posts: 7
    Options

    I found too a little trick to deal with this. I added a small spacer row just above the footer and used it as the anchor point. This way, when someone clicks, they'll be taken right to the bottom to see the contact info. Hope this tip comes in handy for you!

  • visioncraft
    visioncraft Member Posts: 153 Learner
    Options

    @courtneyquaresimo the design for this particular site requires the contact section to be in the footer. But TBH, as the majority of websites I design are for SMBs — who usually only have 1 location, and a very limited number of contact options — I rarely tend to design a website that needs to have a separate 'Contact' page. Looking at it from a UI/UX perspective, depending on the type of website we're creating (Education/PR, Marketing, Sales or Utility), the little contact information we do have can be better placed somewhere where it's more easily visible and readily accessible to the visitor - eg., 'call now' button on the navigation menu, 'send us a message' and 'location map' buttons in the footer.

Categories