Multilevel SideNav

Topic: Multilevel SideNav

breno.miyazaki pro asked 5 years ago

Hi! I've been trying to create a structure as I pasted below:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js

But I'm coming through a few issues like the arrow not rotating when expanding the child nodes and when hovering on those mid-tier nodes (css/, js/) they're getting the font effects (i.e. color changes) and stuff. Here's my code:

<div id="slide-out" class="side-nav sn-bg-4 fixed">
  <ul class="custom-scrollbar">
    <li>
      <ul class="collapsible collapsible-accordion">
        <li>
          <a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Outras Competições<i class="fa fa-angle-down rotate-icon"></i></a>
          <div class="collapsible-body">
            <ul class="collapsible collapsible-accordion">
              <li>
                <a class="collapsible-header waves-effect arrow-r">Poletime<i class="fa fa-angle-down rotate-icon"></i></a>
                <div class="collapsible-body ml-3">
                  <ul>
                    <li>
                      <a href="#" class="waves-effect">Último evento</a>
                    </li>
                    <li>
                      <a href="#" class="waves-effect">Ranking</a>
                    </li>
                    <li>
                      <a href="#" class="waves-effect">Regras</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi, I see this file _navigation.cshtml but this HTML seems to look correct. I'm not sure how to open the file with this .cshtml extension. Could you provide a project which looks the same as MDB package with index.html and CSS and JS files? With construction like on the screenshot:

Best, Marta

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Hi, I've got your project now. Could you guide me through it and indicate where is the file with the problem? Best, Marta

breno.miyazaki pro commented 5 years ago

Hi Marta! You might have to compile the project. I made it redirect right to the issue. The sidenav is fixed to better accomodate the problem. The file itself is located @ Web Project under folder PortalAdminPartialsComponents_Navigation.cshtml

Add comment

breno.miyazaki pro answered 5 years ago

0 0 Best answer

Hi! Any insights on this matter?

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Hi, where are your MDB CSS and JS files? Please, send me your package with HTML, CSS and JS files to m.szymanska@mdbootstrap.com. Best, Marta

breno.miyazaki pro commented 5 years ago

Hi Marta! They're on correct places as well. This is a quite complex project and I'm sending it as a whole. It's a large file and I'll try to break it in smaller pieces. Thank you for your quick response!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

breno.miyazaki

Pro User 17Support score
2Questions 1Answers 2Snippets