Smooth scroll from menu to footer

[Deniel Dobrev]

Dear Xtemos,

Could you please let me know how I could create a menu item to smooth scroll to the footer for example.
Actually I created the footer using HTML block which row has ID, in the menu I used this ID and enabled the one page anchor, but the menu always look like is clicked even if you are not reached the footer.
My main question is how this menu button to not look like always clicked, but only when you reached the footer (the row ID)

• This topic was modified 9 months, 4 weeks ago by Deniel Dobrev.

Hello,

Add the Page Anchor element in Elementor:

Open your page in Elementor editor.

Drag and drop the Page Anchor element to the desired location on your page.

Set an ID for the Page Anchor element (e.g., “footer”).
Then Go to Appearance > Menu.

Create the navigation menu with a custom link item:

Set the URL of the custom link to #footer.

and enable the option page anchor.

If you have any questions please feel free to contact us.

Best Regards.

Dear Support,

First of all I’m using WpBakery not Elementor sorry for not mention that.
I have ID to the section I want and the smooth scroll is working but that is not my problem.
My problem is when for example you are one the homepage and you want to go to footer by pressing the menu link which is linked to the ID of the footer , both home and contacts are looked bold ( as they are clicked) I want the menu link of contacts to be clicked( bolded) only when the customer reach the footer section on the page. Please see the attached photo where is visible that both menu elements are bolded. How I can make menu contacts to look bolded only when the customer reach the footer section on every page?

Attachments:

You must be logged in to view attached files.

Hello,

Go to Appearance > Menus in your WordPress dashboard. In the “Custom Links” section, add a custom link. For example, set the name Contact Test.

Click on the custom link you just created to expand its options. In the “CSS Classes” field, add a custom class, let’s say ‘contact-test’ and save the menu.

Then Go to Theme Setting > Custom CSS > Global Custom CSS to make the “Contacts” menu link bold

.contact-test a {
  font-weight: bold !important;
	color: red !important;
}

By following these steps, the “Contacts” menu link will only appear bold and customized.

Best Regards.

[Author]

Posts