Home Forums Porto Admin – Responsive HTML5 Template CSS change for selected menu

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10031832
    hwinnovations
    Participant

    Hi,

    I’d like to change CSS to have the color for the selected menu, but don’t know what to change. Please let me know.

    Parent-level menu without children

    Image 2020-01-14 at 10.28.26 AM.png

    Example: https://dpp.wattportal.io/admin/dashboard.html

    Expanded menu:

    Image 2020-01-14 at 10.24.27 AM.png

    Example link: https://dpp.wattportal.io/admin/dashboard.html
    (Here parent level menu is highlighted as intended)

    Thanks!!



    Template Version: 2.2.0
    #10031908
    Support2
    Keymaster

    Hello,

    1) You can put the class nav-expanded on <li> in dashboard.html:

    ...
    ....
    .....
    <ul class="nav nav-main">
        <li class="nav-expanded">
            <a class="nav-link" href="dashboard.html">
                <i class="fas fa-home" aria-hidden="true"></i>
                <span>Dashboard </span>
            </a>
        </li>
        ......
        ....
        ...

    * Add just on the page dashboard.html

    2) You can add the class nav-active to the events item:

    <li class="nav-active">
        <a class="nav-link" href="resources-events.html">
            Events
        </a>
    </li>

    But some of your custom code at custom.css is overwriting the CSS that highlights the active item, then you need add this code in “css/custom.css”:

    ul.nav-main li .nav-children li.nav-active > a {
    	color: red !important;
    }

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 2 posts - 1 through 2 (of 2 total)