Hi,
Please can someone help with this:
I added a dropdown link to the navbar which appears and works fine when I click on the preview button but it does not show on my live website at all.
*In the navigation toolbar, the Home and Product link show “activate and deactivate” in the toolbar but when I click on the Resources link, that doesn’t show.
Anyone know what is wrong?
Many thanks in advance 
Preview site:
Live site:
In Bootstrap, the nav toolbar:
Post sone code or bssdesign file.
**From Preview site:**
<div data-bss-parallax-bg="true" style="height: 604px; background: transparent; position: relative; overflow: hidden;">
<nav class="navbar navbar-light navbar-expand-lg textdark text-dark navigation-clean" style="background: rgba(194,209,206,0);">
<div class="container-fluid"><a class="navbar-brand" href="index.html" style="font-family: 'IBM Plex Mono', monospace;padding-left: 21px;padding-top: 38px;">Amped PCR</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse fw-normal text-dark" id="navcol-1" style="font-family: 'IBM Plex Mono', monospace;">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"></li>
<li class="nav-item"><a class="nav-link" href="Shop Pages/shop-index.html" style="text-align: left;">Products</a></li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="#">Resources </a>
<div class="dropdown-menu"><a class="dropdown-item" href="R1-DNA-Extraction-Methods.html">DNA Extraction Methods</a><a class="dropdown-item" href="R2-Current PCR Methods.html">Current PCR <br>Methods</a><a class="dropdown-item" href="R3-PCR Machines.html">PCR Machines</a><a class="dropdown-item" href="R4-PCR Protocol + Troubleshooting.html">PCR Protocol</a><a class="dropdown-item" href="R5-What Is Biotechnology.html">What Is <br>Biotechnology?</a><a class="dropdown-item" href="R6-Product Selector.html">Product Selector</a>
<div class="dropdown-divider"></div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid py-5" id="top-container" style="margin: 27px;margin-bottom: -56px;margin-top: 209px;margin-left: -10px;"><a class="btn btn-primary btn-sm" role="button" href="Shop Pages/shop-index.html">Shop Now</a></div>
<div style="background-image: url("/New%20Cover%20Test%203.png"); background-size: cover; background-position: center center; position: absolute; height: 200%; width: 100%; top: 0px; left: 0px; z-index: -100; transform: translate3d(0px, -18.8986%, 0px);"></div></div>
**From live site:**
<div data-bss-parallax-bg="true" style="height: 604px; background: transparent; position: relative; overflow: hidden;">
<nav class="navbar navbar-light navbar-expand-lg textdark text-dark navigation-clean" style="background: rgba(194,209,206,0);">
<div class="container-fluid"><a class="navbar-brand" href="#" style="font-family: 'IBM Plex Mono', monospace;padding-left: 21px;padding-top: 38px;">Amped PCR</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse fw-normal text-dark" id="navcol-1" style="font-family: 'IBM Plex Mono', monospace;">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"></li>
<li class="nav-item"><a class="nav-link" href="shop%20page%20index.html" style="text-align: left;">Products</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid py-5" id="top-container" style="margin: 27px;margin-bottom: -56px;margin-top: 209px;margin-left: -10px;"><a class="btn btn-primary btn-sm" role="button" href="shop%20page%20index.html">Shop Now</a></div>
<div style="background-image: url("assets/img/New%20Cover%20Test%203.png"); background-size: cover; background-position: center center; position: absolute; height: 200%; width: 100%; top: 0px; left: 0px; z-index: -100; transform: translate3d(0px, -18.8986%, 0px);"></div></div>
I would look at your product link
href="Shop Pages/shop-index.html"
maybe change your directory structure to not have a space - ie shop-pages or shopPages, on your live site - it is “shop page index.html” so totally different
Hey, thank you,
I recently put the e-commerce pages into one folder called “shop” so maybe that’s what caused it. I will look into that now.
Personally, I would take some time and rename all your files names and paths to not have spaces.
It will be a lot easier to read at a later date without all the %20 (space)
Ah, that’s what that means (spaces).
Ok, I will do that.
So, are you saying that doing all of this will allow the “Resources” link to work on the live site?
Thanks for helping me.
There isn’t any code for a dropdown in your live site code. You should also try learning a bit of CSS so you don’t have all them inline styles in the code. Delete your navbar and add one from the components list. That would be a good start. To stop the 20% thing add an uderscore or hyphen between words when you name a file.
@floydmanfloyd I’m wondering if something in the filenames is breaking the export, although I’m having trouble replicating it in my export it is coming out fine.
@a.maker you should definately listen to floyd re the inline styles. Take a bit of time looking at the documentation on creating styles. The first one I would have would be
body {font-family: 'IBM Plex Mono', monospace}
Then you won’t need it again
Thanks. I’ll do the hyphen thing.
Why does the resources link work perfectly fine in preview but not the live site?
I don’t understand why the Resources link would work perfectly in the preview site but disappears in the live site.
Not sure but this is the code for you nav. You have 3 links but one of them has no name and no href link
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"></li>
<li class="nav-item"><a class="nav-link" href="shop%20page%20index.html" style="text-align: left;">Products</a></li>
</ul>
is it possible for you to share your .bsdesign file, it might be easier to work out.
The third one that is missing from there is the “Resources” link, which is a dropdown button to several other pages, it shows on the preview site but not live
Yes, sure, how do I share it with you?
If you search the online components I’ve made a quick nav for you. It’s called for aname. Install it and drag into your project. You’ll need to edit the links to what you want.
If you have dropbox you can put it on there and share the link.
If you don’t want it to be public just message me
Meant to say its called “for amaker”
Hey @floydmanfloyd, I’m pretty sure I installed that navbar but I’m going to send my file to @richards and take it from there, thank you.
No problem. Richards is the man. He’'ll have it sorted in jig time. 