How to Create Custom Dropdown Menu Items on Your Landing Pages

BrainCert offers flexible customization, giving you full access to the code editor for landing pages, allowing you to insert custom HTML. For example, if you're editing a landing page and want to transform the top navigation bar into a dropdown menu, follow these steps.

Step 1 

Open your landing page in Edit Mode.

Step 2

Select the top navbar block, and click the "View Source" icon.

Step 3

Find the menu item you want to convert into a dropdown. For instance, let's use the "Courses" menu item.

Step 4

Locate the HTML code between the <li> and </li> tags.

 And, replace it with the following code:

<style>
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus {
    border-radius: 0.325rem;
}
.dropdown-item.active, .dropdown-item:active {
    color: #066ac9;
    text-decoration: none;
    background-color: #f5f7f9;
}
.dropdown-item:hover, .dropdown-item:focus {
    color: #066ac9;
    background-color: #f5f7f9;
}
.dropdown-item {
    display: block;
    color: #747579;
    width: 100%;
    padding: 5px;
    clear: both;
    font-weight: 500;
    font-size: 16px; 
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: 2px;
}
</style>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" id="demoMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<ul class="dropdown-menu" aria-labelledby="demoMenu">
<li> <a class="dropdown-item active" href="/courses">Courses</a></li>
<li> <a class="dropdown-item" href="/tests">Tests</a></li>
<li> <a class="dropdown-item" href="/classes">Live Classes</a></li>
<li> <a class="dropdown-item" href="/listproducts">Online Store</a></li>
</ul>
</li>

Step 5

Once the code is updated, click "Save Changes" to apply your changes.

Step 6

Switch to "Preview Mode" to view your updated dropdown menu.

Feel free to customize the menu text and links to match your BrainCert content pages or link to any external pages as needed.

Alternatively, advanced users can directly modify the code in the editor at any time. Just remember to back up your code before making any changes or use the "Undo" option if needed.