CSS from Classes not being applied to nav content - html

I am trying to customize the content in my Bootstrap Nav tabs. The CSS classes are being applied but none of the styling shows.
The HTML (took out the other tabs for readability)
.unpublished {
background-color: $green !important;
color: red;
}
//also tried this
.tab-content {
.unpublished {
background-color: green !important;
color: red;
}
}
<ul class="nav nav-tabs course-tabs" id="course" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
<span class="fas fa-info-circle"></span>
About this course space</a>
</li>
</ul>
<div class="tab-content unpublished">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="unpublished">
<span class="fas fa-times-circle"></span>Course space is not published
Publish course space in Canvas arrow-right
</div>
</div>
</div>

It seems you are using sass variables.
Make sure all the sass setup is correct. By that I mean the main.scss and all the partials that you are using are working fine. If not fix that fixed and try again.
Also the bootstrap CSS link (or CDN link) must precede our local custom stylesheet file to over-ride the default styling applied by bootstrap.
A quick tip though, whenever you find yourself in such a condition where your styling is not being applied and many such things, You must inspect code in Developer Window (Ctrl+shift+I on windows and check the styling.
It's the best way you can learn and resolve your issues by yourself.
Thank you

I'm not sure where you're getting $gray-medium as a color but changing that to gray will make the background color work. Perhaps your styling precedence is off and the styles for the a tag are overwriting them. Making styles for the a tag will successfully style the links in your HTML.
.unpublished {
background-color: gray !important;
color: red;
}
//also tried this
.tab-content {
.unpublished {
background-color: green !important;
color: red;
}
}
a {
color: green;
}
<ul class="nav nav-tabs course-tabs" id="course" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
<span class="fas fa-info-circle"></span>
About this course space</a>
</li>
</ul>
<div class="tab-content unpublished">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="unpublished">
<span class="fas fa-times-circle"></span>Course space is not published
Publish course space in Canvas arrow-right
</div>
</div>
</div>

If you want to style the first div, you should use this.
.tab-content .unpublished {
background-color: green !important;
color: red;
}

html
<ul class="nav nav-tabs course-tabs" id="course" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
<span class="fas fa-info-circle"></span>
About this course space</a>
</li>
</ul>
css
.unpublished {
background-color: grey;
color: red;
}

Related

Forcing a single horizontal Nav in Bootstrap 4

I am attempting to have a horizontal navbar, containing three equally sized nav-pills.
When I drop down to a smaller screen resolution (iphone 5) the third item always drops to a new line, and grows to full width.
How do I achieve a single line horizontal layout for all reasonable resolutions?
It does work when I set the py-1 class to py-0 but I like the look of extra padding.
<div class="container-fluid">
<section class="container py-1">
<div class="row">
<div class="col-md-12 align-content-center">
<ul class="nav nav-pills nav-fill navtop">
<li class="nav-item px-1 ">
<a class="nav-link active " href="https://example.com/home">Home</a>
</li>
<li class="nav-item px-1 ">
<a class="nav-link active " href="https://example.com/meetings">Meetings</a>
</li>
<li class="nav-item px-1 ">
<a class="nav-link active " href="https://example.com/courses">Courses</a>
</li>
</ul>
</div>
</div>
</section>
</div>
It seems you have a number of extra containers (which you don't need) -
I removed the containers and added extra CSS for the padding (you can remove it/adjust it if you wish)
Updated
I also reduced the container's left/right padding (from 15px to 5px) to make room for the pills in iPhone 5/SE resolutions as per OP's comment - see image below
See demo below
/* this gives you extra padding on the right-left of each menu item */
.nav-pills li.nav-item {
padding: 0 2px;
}
.container-fluid {
padding-right: 5px !important;
padding-left: 5px !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<ul class="nav nav-pills nav-fill navtop">
<li class="nav-item">
<a class="nav-link active" href="https://example.com/home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://example.com/meetings">Meetings</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://example.com/courses">Courses</a>
</li>
</ul>
</div>

Bootstrap 4 tabs multi-level tablist with collapse is not working properly; more than one tab active at the same time

li.nav-item { display: block; width: 100%; position: relative; display: lock; min-height: 40px; line-height: 2.4; padding: 0; color: #f0f0f0; font-weight: 600; font-size: 16px; border-bottom: 1px solid #092a3b; background: #233d4a; margin: 0;
}
a {
display:block;
}
a.active {
background-color:red;
}
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">1</a>
<div id="collapseOne" class="collapse" data-parent="#Menu">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" data-parent="#collapseOne">
<a class="" data-toggle="tab" href="#One1">1.1</a>
</li>
<li class="nav-item" data-parent="#collapseOne">
<a class="" data-toggle="tab" href="#One2">1.2</a>
</li>
<li class="nav-item" data-parent="#collapseOne">
<a class="" data-toggle="tab" href="#One3">1.3</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">2</a>
<div id="collapseTwo" class="collapse" data-parent="#Menu">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="" data-toggle="tab" href="#Two1">2.1</a>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Two2">2.2</a>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Two3">2.3</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Three">3</a>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Four">4</a>
</li>
</ul>
I am struggling to achieve a multi level tablist menu with collapsible sub menus with Bootstrap 4. I need to use tabs and collapse at the same time. I have achieved to make the functionality (the right panes appearing and disappearing clicking the right links) work properly but there are more than one tab with the active class at the same time. I would like to know if there´s a way to make it work properly just with bootstrap 4 classes not adding more js/jquery code.
Here´s my codepen:
https://codepen.io/AlbertoAguado/pen/XqdmbK
The problem is combining tabs and collapse on the same parent level. Currently, 1&2 toggle tabs, and 3&4 toggle collapse. You need to make them all collapse with tabs inside (exactly like collapse 1&2), or make them all collapse items inside the #Menu.
Additionally, you need to hide any shown tabs when one of the collapse elements is hidden..
$('.collapse').on('hide.bs.collapse', function () {
$('.tab-content .show').removeClass('show');
})
https://www.codeply.com/go/Aq4zWAcUkX

How to style correctly in HTML

I started very recently to study/practicing with HTML, typescript, CSS and angular5, and I'm developing a test app to try what I've learned so far. But I am a little bit confused on how I can solve this problem:
Basically I need to set the color of the text inside of a element (the color of the dropdown button text must be different from the one the menu text has).
<ul class="nav navbar-nav ">
<li class="dropdown" appDropdown>
drop1<span class="caret"></span>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
I want "drop1" text in white, while the "menu" element text can be of the default color.
Now if I put in the CSS this:
ul li a {
color: white;
}
Each text is colored in white. Now I know I can set directly the style property in HTML tag to override the style from CSS, but since I have several dropdown I would like to set everything in the CSS. How can I do it?
Try to use > css selector using class like
ul.navbar-nav>li>a
It will selects all <a> elements where the parent is a .navbar-nav class
Stack Snippet
ul.navbar-nav>li>a {
color: white;
background: red;
}
<ul class="nav navbar-nav">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle" role="button">
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
Another solution is to use :not pseudo class
Stack Snippet
ul:not(.dropdown-menu)>li>a {
color: white;
background: red;
}
<ul class="nav navbar-nav">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle" role="button">
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
Referece Link
child-selector
:not() selector
You can try this simple idea:
<ul class="nav navbar-nav ">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle white-text" role="button" >
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
With this CSS
.white-text {
color: white!important;
}
That means you can utilise this class throughout your site if you need the text to be white
edit
If you're worried about using !important inside the class you can just remove that, but just ensure that the class is the last entry in the class stack, for example:
<a href="#" class="dropdown-toggle white-text" role="button" >
rather than
<a href="#" class="white-text dropdown-toggle" role="button" >
Target the class of your element.
.dropdown-toggle {
color: black; // all your toggle menu (main menu) will have a black color;
}
.dropdown-menu a {
color: white; // all your dropdown menu (sub menu) will have a white color;
}
Don't use !important;
You myst either use a CSS file or use the style="" element inside your HTML tag.
i.e.:
First way: <button style="color: red; background-color: green;">Log in</button>
Second way:
HTML file:
<button class="mybtn">Log in</button>
CSS file:
.mybtn {
color: red;
background-color: green;
}
You work like this with all tags and all elements you that want to style.

Arrange nav tabs to single row in css/html

Im want to arrange all the nav tabs in a single row (in line with hr element).
I dont want any space between hr element and tabs.
After updating margin-top, for Technical Documentation tab, it seems fine, but for 1st tab , Products tab, still gap seems to be there between the hr.
Gap in the 1st tab
I have the below code like:
UPDATED:
<div class="container">
<ul class="nav nav-tabs search-results-navtab">
<li class="active search-list-class">
<a data-toggle="tab" href="#products">Products <br/></a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#multilayer_inductors_series"> Technical
<br/>Documentation</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#smdpower_inductors_series">Support</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#molding_inductors_series">Component
<br/> Selector</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#shieldedsmdpower_inductors_series">Quality</a>
</li>
</ul>
<hr class="search-hr">
</div>
The Css is as:
.search-hr {
margin-top: 0px;
}
.search-results-navtab {
padding-left: 0px;
margin-left: 32px;
margin-right: 70px;
margin-bottom: 1px;
list-style: none;
border: 0px !important;
background-color: white;
}
.search-list-class {
padding-right: 100px;
}
Solution #1
Remove the margin-top value from the hr element.
hr {
margin-top: 0px;
}
This will retain the margin-bottom value which you may need for spacing.
Solution #2
Alternatively, and I would recommend this, remove the hr element and declare border-bottom on a containing parent element of your list items (li), like .nav, then declare a margin-bottom property if you need bottom spacing.
<div class="container">
<ul class="nav nav-tabs search-results-navtab">
<li class="active search-list-class">
<a data-toggle="tab" href="#products">Products <br/></a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#multilayer_inductors_series"> Technical
<br/>Documentation</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#smdpower_inductors_series">Support</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#molding_inductors_series">Component
<br/> Selector</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#shieldedsmdpower_inductors_series">Quality</a>
</li>
</ul>
</div>
Additional Styles Declared:
.nav {
border-bottom: 1px solid #ccc;
margin-bottom: 10px; /* adjust as per requirement */
}

Bootstrap Menu Tabs “Jump” on mobile and tablet

I'm using Bootstrap to develop a menu for a client, but for some reason when I click certain tabs in mobile or tablet mode, the tabs "jump" to another location on the list and leaves an ugly space in between tabs. I made a .gif to show what I'm talking about.
Any ideas why this is happening? I included my own HTML and CSS below. Keep in mind I'm using Bootstrap CSS and JS as well.
EDIT: I think it may have to do something with floats.
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#waxing" role="tab"> WAXING </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#nail-art" role="tab"> NAIL ART </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#nail-enchancements" role="tab">
<div class="hidden-xs"> NAIL ENCHANCEMENTS </div>
<div class="hidden-sm hidden-md hidden-lg hidden-xl"> NAIL ENH </div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#children" role="tab"> FOR CHILDREN </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#vitamin-dip" role="tab"> VITAMIN DIPS </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#gel-services" role="tab"> GEL SERVICES </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#combo-services" role="tab"> COMBINATIONS </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#pedicure" role="tab"> PEDICURES </a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#manicure" role="tab"> MANICURES </a>
</ul>
CSS
.nav-tabs{
background-color:#fff;
border-radius: 3px 6px 0px 0px;
}
.nav-tabs > li {
float: right;
margin-bottom: -1px;
background-color: #fff;
margin:auto;
}
#media(max-width:992px){
.nav-tabs > li {
width:50%;
}
}
.nav-tabs > li.active > a:focus, .nav-tabs > li.active {
border-bottom-style:none;
border-bottom-width: 0px;
background-color: #d3d3d3;
margin-bottom: -1px;
}
#menu-tabs .nav-link{
font-weight: bold;
color: #000;
font-size: 0.8em;
}
#waxing li, #other li {
line-height: 23px;
}
I solved my problem. I did it by explicitly setting the height of each li.
#media(max-width:992px){
.nav-tabs > li {
height: 37px;
width:50%;
text-align:center;
}
}
I think my problem was that I assumed all the li will keep the same height when I click on the link (focus on the a tag) within each li. I know using the float property on elements that are not the same width and height may cause gaps between the elements, hence the ugly gaps and jumps in my original code.

Resources