This question already has answers here:
How can I replace text with CSS?
(25 answers)
Closed 2 years ago.
The text I need to replace is: "I'm Craftsman"
It is present in the following code:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true">I'm Craftsman</a>
</li>
It is possible to make it look as though there is text in an element using CSS. Actually what you are doing is creating a pseudo element, before or after, which you can style in a limited way and, importantly for this exercise, you can include content.
See this example which has an li element with text in the anchor element in the usual way, and another which has the text as content in a pseudo element. (I have given this li element an id just so I can distinguish it from the original one - you could use a class for example instead).
Note especially that the apostrophe (single quote) is a special character which has to be escaped using the backslash in the content setting. I guess this was part of the exercise to introduce this extra thing to have to consider.
<style>
#use-css::before {
content: 'I\'m Craftsman';
}
</style>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true">I'm Craftsman</a>
</li>
<li class="nav-item">
<a id="use-css" class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true"></a>
</li>
</ul>
The following code is
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true">I'm Craftsman</a>
</li>
Just change the I'm Craftsman.
Related
I have a mdb navbar in my Angular app but the height of the navbar seems to flip to a bigger one randomly when reloading the page (Sometimes it keeps height, some other time it has increased height). Also, as soon as I open the developer console in Chrome the size adjusts back to normal which makes it hard to find the issue.
The following screenshots show 1.) how it should look like all the time and 2.) how it is displayed sometimes when I refresh the page:
My navbar is in a separated Angular component which I add to the app.component.html as it shows here:
<app-header></app-header>
<div class="d-flex p-2 justify-content-center">
<router-outlet></router-outlet>
</div>
The header itself is also pretty simple and looks almost like the provided example of mdb
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo" [containerInside]="false">
<mdb-navbar-brand>
<a class="navbar-brand" [routerLink]="'/dashboard'">Admin Console</a>
</mdb-navbar-brand>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/dashboard'">Dashboard</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">Users</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">A</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">B</a>
</li>
</ul>
<span class="fill-remaining-space"></span>
<ul class="navbar-nav ml-auto">
<li *ngIf="!authService.isLoggedIn" class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/sign-in'">Login</a>
</li>
<li *ngIf="authService.isLoggedIn" class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect (click)="this.authService.signOut()">Logout</a>
</li>
</ul>
</links>
</mdb-navbar>
I tried adding sticky-top as Sideclass which seems to improve the behavior when fixed content is inside the router-outlet. But as soon as I navigate to a component which feeds something more dynamic like a table into the router-outlet it happens again like shown here:
Any idea how to keep the navbar from growing?
Thank you!
This seems to be a bug in the component but I found out how to work around.
Apparently the div injected into nav has a style with is used for controllig the height when drop-down is active. This height is meant to be increased only in case of an active drop-down but in my case it got increased sporadically. So I used this CSS to limit the max-height of the navbar when it is not in drop-down mode:
:host ::ng-deep mdb-navbar nav div :not(.show) {
max-height: 40px !important;
}
I'm trying to render a page with pug that displays either a welcome message or login/signup links. The message/links reside within a bootstrap navbar. My code is like the following:
.script
if user
document.getElementById('portal').innerHTML
<li class="nav-item">
<a class="nav-link" href="/account">Welcome! #{user.username}</a>
</li>
else
document.getElementById('portal').innerHTML
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/signup">Signup</a>
</li>
which causes the navbar's styling to break. The nav-items are originally supposed to be side by side.
Resolved, I wasn't paying attention to the finalized html structure, turns out a nested class is stopping the style from cascading as expected.
I have a question regarding navbars. I want to highlight a navbar item when I clicked an item but I don't know if I need to use angular or css for that. Can you guide me a little bit, please?
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a routerLink="/tasks" class="nav-link" href="#">Tasks</a>
</li>
<li class="nav-item">
<a routerLink="/newTask" class="nav-link" href="#">New task</a>
</li>
<li class="nav-item">
<a routerLink="/users" class="nav-link" href="#">Users</a>
</li>
<li class="nav-item">
<a routerLink="/newProject" class="nav-link" href="#">New Project</a>
</li>
</ul>
</div>
You can use routerLinkActive which will add a css class that you can use for styling. So in the following code if the current route is /newProject the list item will be styled according to your active css class:
<li routerLinkActive="active">
<a routerLink="/newProject" class="nav-link" href="#">New Project</a>
</li>
More information on routerLinkActive here.
I am using the latest bootstrap version in angular. The class "nav nav-pills nav-justified" not stacking the tabs when the screen size is reduced below 768px.
I referred to the site http://jsfiddle.net/koala_dev/73rNv/. which is in the post. In stack overflow I followed Justify Nav-pills with Bootstrap v4 but it does work too
This is my HTML code
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" routerLink="/">Feeds</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/status-update']">Status Update</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/goal-setting']">Goal Setting</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/meet-up']">Meet up</a>
</li>
</ul>
</div>
I can't understand why it works in http://jsfiddle.net/koala_dev/73rNv/ here and the same code fails in my case. Please advice.
On analysis we find that:
The Bootstrap version in http://jsfiddle.net/koala_dev/73rNv/ is 3.1.1
The Bootstrap version from the stackoverflow example was unknown (post was dated 2015), but there was an update which referred to this page
we see that classes nav-pills nav-fill are available in BS4... to get the pills from the navigation on their each separate line, we can write some CSS ourselves
working snippet on Bootstrap 4.3.1 below:
#media screen and (max-width: 768px) {
.nav-fill .nav-item {
width: 100% !important;
flex-basis: unset !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<ul class="nav nav-pills nav-fill">
<li class="nav-item ">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
I have tried using class row over this div but could not shift tabs in next line..
<div class="navwrap">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" *ngFor="let menu of menudata; let i=index">
<a class="nav-link" (click)="changecategory(i,menu.id)" [class.active]="menu.isSelected" data-toggle="tab" role="tab">{{menu.name}}</a>
</li>
</ul>
</div>
How to shift remaining tags in other line?
Current Image tabs
Add 'flex-wrap' Class with nav, So you can move tab in new line
<div class="navwrap">
<ul class="nav nav-tabs flex-wrap" role="tablist">
<li class="nav-item" *ngFor="let menu of menudata; let i=index">
<a class="nav-link" (click)="changecategory(i,menu.id)" [class.active]="menu.isSelected" data-toggle="tab" role="tab">{{menu.name}}</a>
</li>
</ul>
</div>
Use flexbox
Using flexbox you can fix your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions.