Adding a Dropdown Menu with Sub Items
Duplicate an Existing Dropdown (Optional):
1. Duplicate an existing BS Dropdown block and customize it
or follow the steps below to create a dropdown from scratch.
Create a New Dropdown Menu:
1. Click the options button on the dropdown we just created and select Add After.
2. Type /BS Nav Dropdown and select the BS Nav Dropdown block.
3. Enter the name of your dropdown menu item and save.
4. Add Sub Items to the Dropdown. In the Document Overview on the left, click the options icon next to the new dropdown block and select Add After.
5. Drag and drop the new paragraph block under the dropdown block to nest it.
6. In the nested paragraph block, type /BS Nav Item and select the BS Nav Item block.
7. In the Nav Item block settings select the Link Type (e.g., Page).
8. Choose the page you want the menu item to link to.
9. Save your changes.
10 Check the Front End:
You’ll see the new dropdown with the Sample Page sub-item link.
Adding WP Login and WP Logout Links
1. Add a Block Before the “Buy Now” Button
2. Type /BS Nav Item and select the BS Nav Item block.
3. In the block settings, Select WP Login as the link type.
4. Enter “Login” as the link text.
5. Duplicate the Login Item you just created.
6. In the duplicated block’s settings select WP Logout as the link type.
7. Change the link text to “Logout.”
8. Save your changes.
9. Test the Links on the front end, If logged in, you’ll see the Logout link.
10. If logged out, you’ll see the Login link.
11. Clicking the Login link will take you to the WP Login page.
12. If our UsersWP plugin is installed, it will redirect you to the plugin’s login page.
Adding a Spacer Item to Adjust Navigation Layout
To move text links to the left and, in this case, keep icons and the buy now button to the right.
1. Remove the right padding from the logo item.
2. Remove the left margin from the Home navigation item.
3. Add a block before the first icon.
4. Type /BS Nav Item and select the BS Nav Item block.
5. In the block settings, choose Spacer (non link).
6. In the advanced block settings, Apply margin-left: auto.
7. Save your changes.
8. Check the Layout, text links will now appear on the left next to the logo, while icons and the “Buy Now” button remain on the right.