Backpack Traveler theme comes with many neat layouts and features. In this article we will cover one of them – the destination sidebar, which can be adjusted for every destination item separately.
First of all, it is entirely made using these 2 sections – Mikado Destination Additional Image and Mikado Additional Destination Sidebar Items, which can be located when editing a destination item, bellow the item’s content.
Note: Changing the options in the Mikado Sidebar section will have no effect on the destination sidebar layout, as these options are intended for posts and pages only!
Now let’s take a look at an example from our demo.
Destination sidebar consists of 2 sections: the first section contains the destination image, while the second has the anchor links.
Mikado Destination Image Section
This section contains the image, destination name, number of related articles and a link leading to the destinations post archive page.
The image is, of course, added via Mikado Destination Additional Image option.
The number of related posts is the number of posts which have that specific destination assigned to them (in our example, it is Paris).
You can find out more about assigning a destination to a post and the destinations posts archive page functionality in linked articles.
Mikado Anchor Links Section
By clicking on one of the links in the anchor section, a destination item page will scroll to the part corresponding to the link.
In order to enable this feature, you should first add the anchor link name to the Mikado Anchor ID option in Row Settings.
Note: This option is found only in Row Settings, not in Column or Inner Row Settings.
Then, in Mikado Additional Destination Sidebar Items section, you should add the complete anchor link url.
It consists of the destination page url and #anchor-id-name.
In case of our demo, this link is as follows:
https://backpacktraveler.mikado-themes.com/destination-item/paris/#sightseeing
In local environment, this link could look something like this:
http://backpacktraveler.test/?destination-item=paris#sightseeing .
Also, it is very important that you add the custom class mkdf-anchor, as without it the anchor functionality simply wouldn’t work.
Both can be seen pictured here:
After you made and saved the changes, you should get this as the result:
To create all the remaining anchors, you should simply repeat these steps for all the corresponding rows.
Only the 2nd section of the sidebar is sticky, which means that it remains displayed on the top while you scroll through the destination item page.
Note that navigating through a destination item using anchor links from the sidebar doesn’t place the row with the anchor ID directly on top. It in fact always leaves a relatively high offset from the top, which can be seen on our demo as well.
If this is not something you find useful or appealing, we suggest placing the anchor ID in a row directly above the one you wish to scroll to.
The end result should look like this:
