Staff replied Templates

Create a Drop Down Menu as a module in Varsita template

Asked by Georgia Lagogianni 3 years ago Last activity 3 years ago

Hi,

was trying to find a way to create a drop down menu module, similar to the main menu in Varsita template.

How can I do that? Is there an extension I am missing maybe?

Thanks

5 replies

Paul Frankowski Senior Staff

3 years ago · edited

Hi Georgia,

in all templates based on Helix, Helix3 and Helix Ultimate you can create dropdown menu, using Menu features.

Just make sure that you keep "root" structure in Joomla Menu Manager

on YouTube you should be able to find some guides about MegaMenu and Helix.

Georgia Lagogianni Asked this

3 years ago

Thanks , maybe I wasn't very clear. I don't want to replace the Varsita template megamenu.

I have a menu created and want it to be dropdown instead of "List" and place it in a module position.

Example:

https://pasteboard.co/FBF6iW3SPdn7.png

Paul Frankowski Senior Staff

3 years ago

Oh, in that case by default is not possible.

But you can find alternative module (on Joomla Extension Directory) and use it in header in "menu" position or different one.

Georgia Lagogianni Asked this

3 years ago

I decided to make a plain bootstrap dropdown menu myself but It looks like there are bootstrap problems/conflicts in Varsita/Helix.

Both Bootstrap 5.1 & 5.2.3 files are loaded , don't know if they are from Varsita or Helix
Bootstrap.min.js is loaded twice , one before popper.js and one after

I created custom HTML module and used the bootstrap example code with default Joomla template and works fine:

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button class="btn btn-primary" type="button">1</button>    
    <button class="btn btn-primary" type="button">2</button>
        <div class="btn-group" role="group"><button id="btnGroupDrop1" class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button>
            <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            </ul>
        </div>
</div>

When I switch back to Varsita , the dropdown doesn't work.

Can you please fix Varsita so that it loads bootstrap.min.js properly?

Thanks

Paul Frankowski Senior Staff

3 years ago · edited

Bootstrap 5.1 & 5.2.3 files are loaded , don't know if they are from Varsita or Helix

It's so easy to check its paths, just preview front-end HTML source code and check < Head > area.

You can edit , customize & replace template files as you wish.