When I preview my design, which uses the standard navbar, the links do not work. There is a page specified for the link, and that page is listed in the a href, but when I preview my design the link does't work. The mouseover hover doesn't work, the cursor doesn't change, and clicking the link does nothing. Does navbar not work in preview?
Post your code or your design file. They work when done correctly, so something is definitely not set up right on your end, but we can't help if we have no idea what it looks like. :)
I literally just dragged the navbar over and changed the link. That's it, and it didn't work. I have started a new project and I'll see if the links work on that.
Once again ... we can't help if we can't see what you did. Something you did isn't right is all I can tell you for sure as I've used the nav as well as external navs and have not ever had any issues with them at all. Upload your exported project pages/files and give us a link so we can see the code if you would please.
Have you created your other pages ?
I am having the same problem, the NavBar links do not work. Here is the code for the page: <!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>UCC</title> <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat+Alternates"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css"> <link rel="stylesheet" href="/Navigation-Clean.css"> <link rel="stylesheet" href="/plx.css"> <link rel="stylesheet" href="/styles.css"> </head>
<body style="color:#5055a3;"> <div> <nav class="navbar navbar-light navbar-expand-md navigation-clean" style="padding-right:10px;padding-left:10px;"> <div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">Toggle navigation</button> <div class="collapse navbar-collapse" id="navcol-1"> <ul class="nav navbar-nav ml-auto"> <li class="nav-item" role="presentation">About us <li class="nav-item" role="presentation">Worship <li class="nav-item" role="presentation">Mission <li class="nav-item" role="presentation">History <li class="nav-item" role="presentation">Calendar/Newsletter </div> </div> </nav> </div> <section class="d-flex" id="plx" style="background-image:url("/DSCF3112939.jpg");background-position:center;background-size:cover;background-repeat:no-repeat;width:100%;height:100vh;"> <div class="carousel slide" data-ride="carousel" data-aos="zoom-in-up" data-aos-delay="950" id="carousel-1" style="width:800px;margin:0px auto;margin-top:20%;height:472px;background-color:rgba(94,94,94,0);"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active">
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
</div>
<div>Previous<a class="carousel-control-next" href="#carousel-1" role="button"
data-slide="next">Next</div>
-
<li data-target="#carousel-1" data-slide-to="0" class="active">
<li data-target="#carousel-1" data-slide-to="1">
<li data-target="#carousel-1" data-slide-to="2">
</html>
I have figured out the problem.If I remove the class:active from the links( <a class="nav-link active" ) the links work. I can do that after exporting the page, but I do not know it how to do it in Bootstrap studio. Can you help ?
Alright, I figured it out. There is a deactivate button at the top. It works now.
Are you using a default Bootstrap Nav from the BSS elements? If so then that setting should not make the links not work. If not, then that is most likely why that setting is doing that. I am not sure that navs brought in from external sources have that setting working on them within BSS. I've got a few that I've tried it on and it just doesn't do anything at all so I'm going to assume that in order to use that feature, you need to be using a default nav within BSS.
Thank you Jo. Yes, I was using the original Bootstrap Nav from Studio. I tried all versions of the navbars, no luck, but as you can see in the postings above I finally managed to track down where the problem was and fixed it.
I have come to another problem still relating to Navbar links. This time I cannot change the color on hover. I tried: .navbar-default .navbar-nav > li > a:hover { color:red !important; }
and .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color:#ff0000 !important; }
none of them works. Does someone knows the right code ?
OK, I managed to find the right code.
.navigation-clean.navbar-light .navbar-nav .nav-link:focus, .navigation-clean.navbar-light .navbar-nav .nav-link:hover { color:#fff!important;
}
The Overview pane is your best friend in BSS lazlo, when you are working with navs especially. If you can't find where something is, use the Overview instead of the Preview window to highlight the various parts so that you will get all of the various parts eventually. This helps because when you highlight a part of an element, it shows you all of the CSS code that is currently being used on that element's "part". Navs are hard to do this with sometimes, but that feature will help you immensely when trying to drill down to the areas you are wanting to change.
There have been a few locations that I had to use Google's Webmaster Dev Tools to find them as well, but only a couple over the past bunch of months so that's not to bad lol. Glad you found it!
Thank you Jo. I use the overview mode, but it didn't help in this case, there is option or settings for .nav-link:hover ( at least I didn't see it ) so I had to find the code in the css file and change it there. Wasn't difficult as soon as I figured out that was the way to go ( exported the design, looked up the css file it created and found what needed to be changed)....but till then I spent some time trying to figure out how to do it inside the program. It was rather going about it in a very different way, but I was stumped.