CODEWITHSUNDEEP
htmlcsswordpressnavigationwordpress-theming
Lena Shore
Lena Shore

Reputation: 55

Turn Wordpress Vertical Nav into accordion?

I have a navigation I created by choosing "vertical nav" in Wordpress using Beaver Builder. website I'm working on where you can see it in action.

The top item is an icon with a bunch of sub-menus and sub-sub-menus. I need to convert all of those into an accordion vs a dropdown. Simple code below to illustrate plus images.

<ul>
<li class="dropdown-menu">Icon
<ul class="sub-menu">
     <li class="need-accordion-sub-menu">More Submenus</li>
     <li class="need-accordion-sub-menu">More Submenus</li>
     <li class="need-accordion-sub-menu">More Submenus</li>
</ul>
</li>
<li>Inquire</li>
<li>Give</li>
<li>Visit</li>
</ul>

How can I accomplish this? I've been playing with it for 2 weeks now and have only succeeded in getting a migraine. See images below.

If I were doing this from scratch and not within Wordpress, I think I'd be okay. But, I can't find the CSS to override. I'm happy to do the heavy lifting if someone can give me some hints.

Thanks for an help you can give me.

I have this: What I have I need this: What I need

Upvotes: 0

Views: 111

Answers (1)

cstax
cstax

Reputation: 47

In order to allow the given submenu within your navigation bar to properly implement the accordion feature, please use the code from 1 of the 3 sections of accordion examples found on this page: https://getbootstrap.com/docs/5.0/components/accordion/ .

Live examples proceed each piece of code. And once you've downloaded the js and CSS file for bootstrap into your environment (found here https://getbootstrap.com/docs/5.0/getting-started/download/ ), then you can copy paste the preferred html example code into your IDE and then run your saved html page in order to view the fully working example.

You'll see that Boot strap uses tags with classes and IDs in order to create the accordion feature within the sample html code. The div information all refers back to the bootstrap javascript where all of the actions/events are managed in order to allow for the finished product (ie moving sub menus)

Once you can get the sample code to run, then you can move onto merging the sample code with your html code in order to achieve your goal. For this, I would recommend creating a temporary file that allows you to alter the code without accidentally messing up your original file. This assumes that you're not already using a git repository.

Thank you.

Upvotes: 1

Related Questions