Theme Manager Advanced Variables not working

Hi,

Why is it that I can not get any rollover behaviors to occur in a navbar component? I have placed at the top of my page a Navbar Dark Compnent. I have enabled:

“Dropdown - Link Hover Bg”
&
“Navbar - Dark Hover Color”

Yet I see no rollover behaviors. I can see that these Color Properties I have enabled are present in the Design Tab for those components. I have tried closing the app & refreshing the page.

Thank You.

Hello, can you please add a couple of screenshots explaining what you mean by:

Also - what do you call rollover behaviors?

Thanks. Ive attached two images showing that I have enabled the Advanced Variables which I would think control the rollover behavior on a Nav Bar component. By Rollover I am indicating when I hover my mouse over the NavBar Link in a desktop browser.

Ah so you are referring to the advanced options in the Theme Manager.
Can you check in your project settings what is selected as Design Framework?

Thanks. Yes.
I am using Bootstrap 5 Local, Font Awesome & AppConnect

Ok but what is selected in the project settings dialog in the Design Framework menu?

Not sure, where would I check that?


Thanks.

Ok the settings look fine.
When you make the changes in the theme manager, do you click the “Rocket” icon on top of the panel? This compiles the css and uploads it to the selected target.

Yes, I do.

I am still developing locally, however here is the coding for the Top half of my page, if that is helpful:

<!doctype html>

<html>

<head>

    <script src="dmxAppConnect/dmxAppConnect.js"></script>

    <meta charset="UTF-8">

    <title>Untitled Document</title>

    <link rel="stylesheet" href="css/style.css" />

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />

    <script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer=""></script>

    <script src="dmxAppConnect/dmxTyped/dmxTyped.js" defer=""></script>

    <script src="dmxAppConnect/dmxTyped/typed.min.js" defer=""></script>

</head>

<body is="dmx-app" id="Menu" src="assets/images/GSA-Logo.png">

    <header class="bg-secondary">

        <div class="container-fluid ps-0 pe-0">

            <div class="row">

                <div class="col">

                    <div class="bs-component">

                        <nav class="navbar navbar-expand-lg navbar-dark style35 bg-primary">

                            <div class="container">

                                <img class="img-fluid style27 me-3" src="assets/images/Logo.png">

                                <a class="navbar-brand text-uppercase fw-bold style34" href="#">Logo Mat Central</a>

                                <button class="navbar-toggler" type="button" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" data-bs-toggle="collapse" data-bs-target="#navbarColor01">

                                    <span class="navbar-toggler-icon"></span>

                                </button>

                                <div class="collapse navbar-collapse" id="navbarColor01">

                                    <ul class="navbar-nav me-auto">

                                        <li class="nav-item active">

                                            <a class="nav-link text-light" href="#">Home <span class="visually-hidden">(current)</span></a>

                                        </li>

                                        <li class="nav-item">

                                            <a class="nav-link text-light" href="#">About</a>

                                        </li>

                                        <li class="nav-item">

                                            <a class="nav-link text-light" href="#">Contact</a>

                                        </li>

                                        <li class="nav-item">

                                            <a class="nav-link text-light" href="#">GSA Contract</a>

                                        </li>

                                        <li class="nav-item dropdown d-md-none d-lg-block">

                                            <a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                                                Products

                                            </a>

                                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                                                <li><a class="dropdown-item bg-white text-dark" href="#">Custom Logo Floormats</a></li>

                                                <li><a class="dropdown-item bg-white text-dark" href="#">Commercial Entrance Mats</a>

                                                </li>

                                                <li><a class="dropdown-item bg-white text-dark" href="#">Industrial Work Safety Mats</a>

                                                </li>

                                                <li><a class="dropdown-item bg-white text-dark" href="#">Commercial Flooring Tiles</a>

                                                </li>

                                                <li><a class="dropdown-item bg-white text-dark" href="#">Rubber Sports Flooring</a>

                                                </li>

                                            </ul>

                                        </li>

                                    </ul>

                                </div>

                                <img src="assets/images/GSA-Logo.png" class="style28 img-fluid d-none d-lg-inline">

                            </div>

                        </nav>

                    </div>

                </div>

            </div>

        </div>

    </header>

I just tested the same setup as you and it works perfectly fine using the variables you set:

Are you sure the css is not cached in your browser? Maybe try clearing the browser cache and test again.

OK, thanks. If not I’ll try building the menu again.

There’s no need to rebuild the menu :slight_smile: Try clearing the browser cache and let’s see what happens then.

Hmm, tricky, Yes I cleared Cache & then tried a different browser, still not functioning.

Maybe upload your site to some test server where we can access it and check it.

Thanks for your help. - Turns out my coding was a little off & somehow prevented the styling from working. I recreated the Navbar component properly using Wappler components, rather than taking Navbar code from the Bootstrap Documentation site, now the rollover functionality is correct. Wappler is awesome!

1 Like