Dropdown & hamburger not working

Beginners
1

My mcgraphics.us/indexNew.html nav dropdown & hamburger are not working. Help please.

<nav class="navbar navbar-expand-lg navbar-dark pb-lg-0 pt-lg-0 position-sticky"> 
                <div class="container"> 
                    <a href="#graphic" target="_pg_blank" class="link-primary">Graphic & Web Design</a>
                    <ul class="align-items-lg-center flex-row ms-auto me-2 me-lg-0 navbar-nav order-lg-2"> 
                        <li class="d-none d-sm-block nav-item"> 
</li>
                        <li class="ms-2 nav-item"> 
</li>                         
                    </ul>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown-3" aria-controls="navbarNavDropdown-3" aria-expanded="false" aria-label="Toggle navigation"> 
                        <span class="navbar-toggler-icon"></span> 
                    </button>
                    <div class="collapse navbar-collapse " id="navbarNavDropdown-3"> 
                        <ul class="navbar-nav "> 
                            <li class="nav-item"> 
                                <a class="nav-link pb-lg-4 pe-lg-3 ps-lg-3 pt-lg-4 text-dark" href="#graphic">Layout & Design</a> 
                            </li>                             
                            <li class="nav-item dropdown">
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li>
                                        <a class="dropdown-item" href="https://amzn.to/2OCHayV">My Amazon History Tees </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="https://www.funkyhistory.com">History Portraits & Timelines</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="https://mcgraphics.us/music">Iconic Musicians</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="https://mcgraphics.us/cool">Fun Illustrations</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="https://mcgraphics.us/mad">Sample Page</a>
                                    </li>
                                </ul>
2

Hi @kat,
A few things:

  1. the code you pasted above is malformed - I’m guessing it was just a cut-and-paste error, but you might want to check.
  2. using the navbar-dark class assumes that your navbar will be a dark color, so the hamburger is styled white. It is actually there on the page, it is just the same color as the navbar
  3. For your inside drop down, you don’t have a triggering link like:
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown link </a> above your dropdown-menu.
    Cheers,
    Bob
1 Like
3

Went line by line against one of your new BTS theme directory htmls in VSC moving the code until the dropdown was fixed. A brutal way to do it, but it worked.
Next trying to get the navbar dark and text white, do link hovers, clean up text and maybe do a fade-in interaction on the banner text from one of your tutorials. Onward!
Thanks greatly for you help, Rob.

1 Like
4

https://mcgraphics.us/indexNew.html
a.nav-link:hover { color: #c24e8b;} doesn’t work. I tried nav-item:hover, a:hover, adding more & less specificity & in vsc and in PG through the create class panel.
.h3:hover { color: #c24e8b;} works fine
Suggestions please

5

So Bootstrap has a crazy number of !important declarations. In this case, the text-white class has an important. So, only choice is to use something like a.nav-link:hover { color: #c24e8b !important;}.
Cheers,
Bob

1 Like
6

Works perfectly. But does this mean that adding css transforms on hover will be challenging?

7

It all depends on the CSS property and other classes already present. The browser/Pinegrow DevTools are a great asset to determine if you need !important.

1 Like
8

Specific PG panels? If not, do you mean checking DevTools when you open a PG window in the browser?

9

Both the DevTools in Pinegrow and the Browser. The DevTools when you right-click on the pinecone and select inspect or the DevTools in the browser. Both will let you see if there is a rule with ‘!important’ in it. You can also see it in the Styles panel if you open the rules from Bootstrap that are hidden by default (see the grey text in the panel when you have an element selected).

10

Pinecone DevTools seems to be interacting with the PG interface rather that my open PG page.

PG_DevTool_pinecone
PG_DevTool_pinecone1920×1147 262 KB

11

An easier way is open your page in an external browser and inspect with the devtools of this external browser

1 Like
12

So, Pinegrow is a web App. It is a web page, powered by JavaScript, running on a stripped-down version of the Chrome browser. The Inspect tool of Pinegrow shows you both the elements of the App, but also the elements of your page, which is just a page in a page. Use the element finder in the upper-left corner of the DevTools to select an element on your page within Pinegrow.

1 Like
13

Interesting, but I think I’m with Akayy, easier to open browser in PG and use devtools there.

14

Whatever you feel comfortable with. I just like to keep people informed and give them options.

2 Likes
15

You are super at that!!! I’m a fan, Rob.

1 Like