Portfolio Dropdown to Header Menu

Description

automatically adding Portfolio items to Header Dropdown Menu
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. First, find Portfolio Page URL

In my example, we will have: /project-02

#1.2. Create a Dropdown to Main Navigation

Dropdown will have

Name: you can enter anything what you want
URL Slug: use format: /dropdown-{portfolio page url slug} – In my example, it will be: /dropdown-project-02

#1.3. Use this code to Code Injection > Footer

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c01v3 Portfolio Dropdown to Header Menu -->
<script>
window.PortfolioDropdownConfig = {
  dropdownPrefix: "/dropdown-",
  iconPosition: "before",
  iconSize: "34px",
  iconTitleSpace: "12px",
  imageFormat: "100w",
  openPageOnTitleClick: true,
  hideArrowOnMobile: true
};
</script>
<script src="https://code.beaverhero.com/portfolio/0726c01v3portfoliodropdownmenu.js"></script>

#2. Customize

#2.1. To change icon size before item title, change Line 06

iconSize: "34px",

#2.2. On mobile, by default, if users click Dropdown Title it will open Portfolio Page without opening new panel.

If you want to enable new panel on click dropdown title, like this

You can change Line 09 – Line 10

openPageOnTitleClick: true,
hideArrowOnMobile: true

openPageOnTitleClick: false,
hideArrowOnMobile: false

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Add a Markdown Block

Add this code into Markdown Block

<script>
window.PortfolioDropdownConfig = {
  dropdownPrefix: "/dropdown-",
  iconPosition: "before",
  iconSize: "34px",
  iconTitleSpace: "12px",
  imageFormat: "100w",
  openPageOnTitleClick: true,
  hideArrowOnMobile: true
};
</script>
<script src="https://code.beaverhero.com/portfolio/0726c01v3portfoliodropdownmenu.js"></script>