I have been trying to link html pages created on bootstrap without success. The buttons don't even click out so it's not like I get taken to another page with an error message. Just nothing. But today I observed something that might help someone more savvy than me identify the problem.
So, I'm trying to link other pages on the index.html (as an example, the services page).
Instead of taking me to "https://chozeqfarms.dashnexpages.net/services/" it looks like it wants to take me to https://chozeqfarms.dashnexpages.net/index/services.html, which I observe when hovering over the service button.
My code snippet for the navigation bar is below, and the href looks regular to my untrained eyes. But I must be doing something wrong, please what could be wrong and how do I fix it?
<div class="row navbar-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 navbar-container mynav">
Chozeq Farms
<nav class="navbar navbar-full">
<div class="collapse navbar-toggleable-md" id="tmNavbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="trainings.html">Trainings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
☰
</button>
</div>
</div>
Related
I am trying to create a responsive navbar that works in a fashion such that I have two sets of right-aligned links. The first set should collapse, but the second set should remain visible at all times, with the toggler to the left of the latter set of links. That means, in the snippet below, that "Link One", "Link Two", and "Link Three" should collapse, but "Link Four" and "Link Five" should remain visible. This is a very simplified version of what Facebook does with their navbar.
Unfortunately, this is the closest that I have been able to get, though. Before the toggler is shown, everything is where it should be. When I expand, however, "Link Four" and "Link Five" drop to the bottom of the navbar, instead of staying at the top. I have tried manipulating the second set of links directly, via CSS, and could also not seem to accomplish what I was looking for.
Any feedback would be greatly appreciated, as front-end development is definitely not my strong suit.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
[Brand]
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="btn">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Link One
</li>
<li class="nav-item">
Link Two
</li>
<li class="nav-item">
Link Three
</li>
</ul>
</div>
<ul class="navbar-nav ms-auto flex-row">
<li class="nav-item">
Link Four
</li>
<li class="nav-item">
Link Five
</li>
</ul>
</nav>
Looks like you just need to use the ordering classes to get what you want. In this case order-md-last on the 2nd set of links, and then they will be natural order (2) on less than md breakpoints (xs,sm):
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
[Brand]
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav ms-auto flex-row order-md-last">
<li class="nav-item">
Link Four
</li>
<li class="nav-item">
Link Five
</li>
</ul>
<div class="collapse navbar-collapse" id="btn">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Link One
</li>
<li class="nav-item">
Link Two
</li>
<li class="nav-item">
Link Three
</li>
</ul>
</div>
</nav>
responsive demo
Each of my nav links work in my code, and I cannot find the solution as to why it will not pass the test when I run my code through freecodecamp. Here is the code in question:
<div class="navigation">
<nav id="navbar">
<header class="dragonball">Dragon Ball</header>
<a class="nav-link" href="#creator">
Creator
</a>
<a class="nav-link" href="#characters">
Characters
</a>
<a class="nav-link" href="#sagas">
Sagas
</a>
<a class="nav-link" href="#transformations">
Transformations
</a>
<a class="nav-link" href="#overview">
Overview
</a>
</nav>
</div>
Is there something missing somewhere? As far as functionality, clicking on these elements works as intended, directing you to the portion of the page it displays. Please help!
I am getting multiple users from an API call and all are being generated with the same html and css. When I navigate the tabs of each user only the first user changes instead of the specific user. I have tried interpolating the id but comes to no effect. Here is the code.
<div *ngFor="let user of users" class="container emp-profile">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="true">About</a>
</li>
<li class="nav-item">
<a class="nav-link" id="address-tab" data-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="false">Address</a>
</li>
<li class="nav-item">
<a class="nav-link" id="company-tab" data-toggle="tab" href="#company" role="tab" aria-controls="company" aria-selected="false">Company</a>
</li>
</ul>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="tab-content profile-tab" id="myTabContent">
<div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="about-tab">
You should not provide static id to html elements when using an *ngFor. You will get several html elements with the same id, so your <a> tags won't know where to go exactly and will target the first they encounter. That's why only your first user changes.
You can specify a dynamic id using Angular :
<div [id]="'my-tab-' + user.name"></div> // id === 'my-tab-user1'
I am creating a single page website using Angular 2 and Bootstrap 4.
I created a navbar component that is always on top of the page and I am using page anchor navigation (#id). Please note that I haven't created a routing module (so far it hasn't been necessary to do this).
The navbar code is below:
<nav class="navbar navbar-default fixed-top navbar-inverse navbar-toggleable-md">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggler navbar-toggler-right btn btn-outline-secondary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="index.html">Garatéa</a>
</div>
<div id="collapseExample" class="navbar-collapse collapse" [ngbCollapse]="isCollapsed">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#home">Início</a></li>
<li class="nav-item"><a class="nav-link" href="#about">Sobre</a></li>
<li class="nav-item"><a class="nav-link" href="#team">Quem Somos</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contato</a></li>
</ul>
</div>
</div>
</nav>
Each link corresponds to a section of the single page website, for example, the home component template is:
<div id="home" class="text-center home-background">
<div class="overlay">
<div class="content">
<h1>Bem vindo à <strong><span class="title-text">Garatéa</span></strong></h1>
<p class="lead">Somos uma inciativa que <strong>aumenta a taxa de sobrevivência</strong> em emergências médicas.</p>
</div>
</div>
</div>
My question is: how can I highlight the link in the navbar that corresponds to the section of the website that I am currently browsing? For example, if I am looking at the team about section, I expect to have an active CSS class on the navbar: <li class="nav-item active"><a class="nav-link" href="#about">Sobre</a></li>.
You can use the srcElement on click of that <a> tag as below
<a class="nav-link" (click)="clickedLink($event)">Início</a>
<a class="nav-link" (click)="clickedLink($event)">Início</a>
<a class="nav-link" (click)="clickedLink($event)">Início</a>
Method will be as
clickedLink(e){
let element = e.srcElement;
console.log(e)
for(let i =0; i <element.parentElement.children.length ; i++){
if(element.parentElement.children[i].classList.contains('active')){
element.parentElement.children[i].classList.remove('active')
}
}
element.classList.add('active');
}
LIVE DEMO
I'm using Angular 2 with Bootstrap 4. I can get the active tab to change using the following code:
navbar.component.html
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="navbar">
<div class="container">
<a class="navbar-brand" [routerLink]="['']">My App</a>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
<a class="nav-link" [routerLink]="['']">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
<a class="nav-link" [routerLink]="['/about']">About</a>
</li>
<li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
<a class="nav-link" [routerLink]="['/example']">Example</a>
</li>
</ul>
</div>
</div>
</nav>
The line:
[routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
works well at changing to the currently active tab, but when I navigate to a component using something like:
this.router.navigate(['']);
The active tab doesn't change. Is there a way to change the active tab when navigating like above?
So basically you want to make your high-lighting in a service and call that service to apply your style when your URL equals a specific state. this is done by using
this.router.url === '/myroute'
here is my plunker. NOTE that the active tab will change whether you use the links or the buttons. The buttons are what use the this.router.navigate(['']); like you asked in the question