Articles in this section
Category / Section

How to Create Custom Dropdown Menu Items on Your Landing Pages

Published:
4 mins read

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.

These steps apply to the following landing pages: 'Limitless Learning', 'Education Trends', 'Knowledge Business', 'Online Tutor', and 'Smart Kids'.

Here’s how you can create a dropdown menu once you complete this step-by-step guide.



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.


Pro Tip:

For cleaner HTML, it's best to move the <style>..</style> block to just above the </head> tag.

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.



In just a few simple steps, you can easily customize your landing page navigation with dropdown menus to enhance user experience. Take full advantage of BrainCert’s flexibility by adjusting the menu to fit your content or external links. Remember, always preview your changes to ensure everything looks just right!


Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Access denied
Access denied