Documentation > Customizing the Header

Link Menu Items To Frontpage Widgets

244

With Optimizer you can easily link your front page widgets to your menu item, so that when you click the menu item, you are scrolled to that widget.

  1. First we will have to know the ID of that front page widget. To find the widget id, Go to Appearance > Customize
  2. Hover over the widget you want to know the id of
  3. You’ll see an pencil icon, Hover over the icon, you’ll see a text appears like this: “Edit – #optimizer_front_about-5”
  4. Here the “optimizer_front_ about-5” is the id of this particular widget.
  5. Now Navigate to Customize > Menus and click the “Gear” icon and make sure the “CSS Classes” option is checked.
  6. Now add a Custom link menu by clicking on the “Add Items” button and then Click on “Custom Links” tab.
  7. Now in the url field, add your site address then after your site address add a trailing slash + # + a custom id (anything you like. No space) (eg: http://www.example.com/#about).
  8. Click on “Add To Menu” & then Expand the newly created Menu item.
  9. Now in the “CSS Classes” field write the name of the widget id without the #. Eg: “optimizer_front_about-5”.
  10. Now Click the “Save Menu” button to save your menu and your menu should be linked to the specific element.
  11. Click the “Save Menu” button to save the changes.