On my breadcrumbs in Bootstrap 4 after the first li I need to be able to remove forward slash
Change
Location: / Catalog
To
Location: Catalog
Question: How am I able to remove the first forward slash on bootstrap breadcrumbs
I tried
.breadcrumb-item:first-of-type::before {
display: inline-block;
padding-right: 0.5rem;
padding-left: 0.5rem;
color: #868e96;
content: "";
}
HTML
<div class="modal-header justify-content-center">
<ol class="breadcrumb">
<li class="breadcrumb-item">Location: </li>
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<li class="breadcrumb-item"><?php echo $breadcrumb['text']; ?></li>
<?php } ?>
</ol>
</div>
I believe what you're looking for is this.
Since Bootstrap adds the / before the elements starting on the second element, we have to select the second element by using the nth-child() CSS selector like so.
.breadcrumb .breadcrumb-item:nth-child(2)::before {
content: "";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="modal-header justify-content-center">
<ol class="breadcrumb">
<li class="breadcrumb-item">Location: </li>
<li class="breadcrumb-item">Content</li>
</ol>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Use selector .breadcrumb-item:first-of-type+.breadcrumb-item::before to set content of :before pseudo-element as you wish:
.my-breadcrumb .breadcrumb-item:first-of-type+.breadcrumb-item::before {
content: "";
}
.dot-breadcrumb .breadcrumb-item:first-of-type+.breadcrumb-item::before {
content: "...";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Library</li>
<li class="breadcrumb-item active">Data</li>
</ol>
<ol class="breadcrumb my-breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Library</li>
<li class="breadcrumb-item active">Data</li>
</ol>
<ol class="breadcrumb dot-breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Library</li>
<li class="breadcrumb-item active">Data</li>
</ol>
The before selectors begin on the 2nd child. So you could so this:
.breadcrumb-item:nth-child(2):before {
content: '';
padding-right: 0;
}
I also overrode Bootstrap's padding-right to account for the new spacing between the list-items.
Use this selector,
.breadcrumb-item+.breadcrumb-item::before{
content: ">";
color: white;
}
Related
I have a React app, I'm trying to add a NavBar there like this
<ul id="dropdown1" className="dropdown-content">
<li><NavLink to="/create">Create lessons</NavLink></li>*/}
<li><NavLink to="/lessons">Lessons</NavLink></li>
<li><NavLink to="/quizes">Quizes</NavLink></li>
<li><NavLink to="/quizcreator">Create QuizGame</NavLink></li>
<li></li>
<li></li>
</ul>
<nav>
<div className="nav-wrapper">
Logo
<ul className="right hide-on-med-and-down">
<li><NavLink to="/home">Home</NavLink></li>
<li><a className="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i
className="material-icons right">arrow_drop_down</i></a></li>
<li><a href="/" onClick={logoutHandler}>Logout</a></li>
</ul>
</div>
</nav>
I would like this thing to open and show the contents either when clicked or hovered over
The materialize css website describes the following code
$(".dropdown-trigger").dropdown();
But I can't figure out where to insert it? Application on the MERN stack
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
According to the official doc you should be able to enable all your dropdowns like the following:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
Here is an example (please open in full-page):
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
add a onclick event in your second "li" item, pass the event object, call dropdown() function by fetching the classname from the event object.
<li>
<a className="dropdown-trigger" href="#!" onclick{(e) => e.target.className.dropdown();} data-target="dropdown1">
Dropdown<i className="material-icons right">arrow_drop_down</i>
</a>
</li>
Easy ! just add this code to the js file
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
You haven't init the dropdown that's why it's not working ! And don't use this framework maybe MDbootstrap will be perfect because they give you a React version and they have a pretty documentation without ads !
As You said, you are using React, and based on the link that you left on the question, $(".dropdown-trigger").dropdown(); is the jQuery way, you need to find out the React way
You could install materialize-css package, I guess you will find How to use materialize-css with React? helpful for this purpose
then import and use the package like this:
import React, { useRef, useEffect } from 'react';
import M from 'materialize-css';
function DropDown() {
const dropDownTriggerRef = useRef();
useEffect(() => {
M.Dropdown.init(dropDownTriggerRef.current);
}, [])
return (
// all of the other tags and other stuff
....
<li>
<a className="dropdown-trigger"
href="#!" data-target="dropdown1"
ref={dropDownTriggerRef}
>
Dropdown
<i className="material-icons right"> arrow_drop_down </i>
</a>
</li>
....
);
}
I want to change the background color of this nav when active/clicked, how can I achieve this? using css
<div class="row container-fluid mainTabCon" style="width: 100%" style="">
<ul class="nav nav-pills" style="margin: 0 auto; ">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#"><strong>GENERALIDADES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#"><strong>DESEMPEÑO</strong></a>
</li>
</ul>
</div>
help is appreciated
Add this script to the end of the body or your script file:
(taken from w3 schools and adjusted to you)
// Get the container element
var btnContainer = document.getElementById("myDiv");
// Get all buttons with class="btn" inside the container
var lis = btnContainer.getElementsByClassName("nav-link");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
Then just style the .active class:
.active {
background-color: blue;
}
Full page with code described:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
.active {
background-color: blue;
}
</style>
<body>
<div class="row container-fluid mainTabCon" id="myDiv" style="width: 100%" style="">
<ul class="nav nav-pills" style="margin: 0 auto; ">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#"><strong>GENERALIDADES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#"><strong>DESEMPEÑO</strong></a>
</li>
</ul>
</div>
<script>
// Get the container element
var btnContainer = document.getElementById("myDiv");
// Get all buttons with class="btn" inside the container
var lis = btnContainer.getElementsByClassName("nav-link");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
After some discussion with other users, are you referring to Bootstrap's js libraries? If not, add them to the end of the body and ignore the code above to see if it works.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
I am learning responsive menus and by googling, i got the hamburger checkbox hack.
What i am trying to do is show only direct descendants by clicking the hamburger and hide the sub menus.
#toggle-menu {
cursor: pointer;
}
#primary-nav,
#menu-toggle,
#primary-nav>ul {
display: none;
}
#menu-toggle:checked+#primary-nav {
display: block;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
<a href="#">
<h1>Company</h1>
</a>
<label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
<input type="checkbox" id="menu-toggle">
<ul id="primary-nav">
<li>home</li>
<li>dropdown
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
</div>
Any help will be appreciated
To only show the ul after the input, you need to hide all uls, then only show the ul directly after a checked input
You can then add a class on all the inputs and do the same for the submenu.
#toggle-menu {
cursor: pointer;
}
.toggler, /*checkboxes a class of toggler and hide */
ul { /* hide all menus (you may want to give them all a class) */
display: none;
}
.toggler:checked+ul { /* only show a ul if it is directly after a checked toggler input */
display: block;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
<a href="#">
<h1>Company</h1>
</a>
<label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
<input type="checkbox" id="menu-toggle" class="toggler">
<ul id="primary-nav">
<li>home</li>
<li>
<label for="sub-menu1">dropdown</label> <!-- use a label and target the checkbox below -->
<input type="checkbox" class="toggler" id="sub-menu1"> <!-- add this -->
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
</div>
For some weird reason i cant change the background of the entire list item even though i selected the list.
Here is the code:
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
<style>
.project-item>ol>li:hover {
background-color: #eee;
}
</style>
The code you posted works fine. See this example.
.project-item>ol>li:hover {
background-color: #eee;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
This code seems to work.
Change the colors its pretty hard to see a gray color on a white background.
.project-item ol li:hover {
background-color: firebrick;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
I resolved the issue by removing float left on first span and just having a float right. That seemed to work.
I'm trying to make it so that I can use a menu like this
To be fair I barely understood this and I was informed that you can use a style with the hover function.
Here's what I tried with my code:
<center>
<ul>
<li>
<img src="images/audiorageGIFtype/audiorageBanner.gif" alt="Welcome to AudioRage!"/>
</li>
<li>
<img src="images/audiorageGIFtype/audiorageButtonHome.gif" alt="Home"/>
<img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
<img src="images/audiorageGIFtype/audiorageButtonAbout.gif" alt="About"/>
<img src="images/audiorageGIFtype/audiorageButtonCart.gif" alt="Cart"/>
</li>
</ul>
</center>
<br />
<center>
<div class="showMe">I want this to show!!</div>
</center>
Here's the CSS
.showMe
{
display: none;
}
.showHim:hover .showMe
{
display: block;
}
Here's a pre-made link of the code to JSFIDDLE
This won't work because your display:block rule is looking for .showHim that is being hovers with the child of .showMe. You can do it a couple of ways.
Targeting a hidden child: jsFiddle
CSS
.hoverme:hover .showMe {
display: block;
}
HTML
<span class="hoverme">
<img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
<span class="showMe">I want this to show!!</span>
</span>
Or targeting a sibling jsFiddle
CSS
.showHim:hover + .showMe {
display: block;
}
HTML
<img class="showHim" src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
<span class="showMe">I want this to show!!</span>
The typical menu is structured like this which makes it easy to target the hidden item. jsFiddle
HTML
<ul class="menu">
<li>
Some menu item
<ul class="submenu">
<li>Sub menu item</li>
</ul>
</li>
...
</ul>
CSS
.submenu {
display:none;
}
.menu > li:hover .submenu {
display:block;
}
You need to use some jQuery here to make if work:
$(".showHim").hover(
function () {
$('.showMe').css("display","block");
},
function () {
$('.showMe').css("display","none");
}
);
});
Here working example
for this you need to change your html structure
html code
<center>
<ul>
<li><img src="images/audiorageGIFtype/audiorageBanner.gif" alt="Welcome to AudioRage!"/></li>
<li><img src="images/audiorageGIFtype/audiorageButtonHome.gif" alt="Home"/></li>
<li class="showHim"><img src="images/audiorageGIFtype/audiorageButtonStore.gif" alt="Store" />
<div class="showMe">I want this to show!!</div></li>
<li><img src="images/audiorageGIFtype/audiorageButtonAbout.gif" alt="About"/></li>
<li><img src="images/audiorageGIFtype/audiorageButtonCart.gif" alt="Cart"/></li>
</ul>
</center>
CSS Code
.showMe{
display: none;
}
.showHim:hover .showMe{
display: block;
}
JsFiddle file