i've got a problem with the responsive bootstrap theme, in the admin panel i've got a top and a left navbar, everything ok there but when i go to reduced view such as mobile, the left bar comes up as a second top bar(that is what i want it to do) but the problem is that it overlaps part of the content, because i have a padding-top thinking on only one bar, so i don't want to double that padding because in a normal view i'll have a blank space wich i don't want.
So how can i make a different padding-top for normal view and reduced view.
Here is the code:
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{!!URL::to('/')!!}">SCM</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li><i class="fa fa-home fa-fw"></i>
<!-- /.dropdown -->
<li class="dropdown">
<i class="fa fa-user fa-fw"></i><span class="caret"></span>
<ul class="dropdown-menu">
<li>Perfil</li>
#if(Auth::user()->type_id == 1)
<li>Administrar</li>
#endif
<li role="separator" class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i>Logout</li>
</ul>
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li <?php if(isset($section)){echo (($section=="user")?"class=\"active\"":"");}?> >
<i class="fa fa-users fa-fw"></i> Usuario<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="create")?"class=\"active\"":"");?> href="{!!URL::to('/user/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list")?"class=\"active\"":"");?> href="{!!URL::to('/user')!!}"><i class='fa fa-list-ol fa-fw'></i> Mostrar todos los usuarios</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="search")?"class=\"active\"":"");?> data-toggle="modal" data-target="#searchModal_admin" href="#"><i class='glyphicon glyphicon-search fa-fw'></i> Busqueda avanzada</a>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="exercise")?"class=\"active\"":"");}?>>
<i class="fa fa-tags fa-fw"></i> Ejercicios<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="create")?"class=\"active\"":"");?> href="{!!URL::to('/exercise/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list")?"class=\"active\"":"");?> href="{!!URL::to('/exercise')!!}"><i class='fa fa-list-ol fa-fw'></i>Listar</a>
</li>
<li><i class="fa fa-certificate"></i> Categoria<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="create_activity")?"class=\"active\"":"");?>
href="{!!URL::to('/exercise/activity/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar
</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list_activity")?"class=\"active\"":"");?>
href="{!!URL::to('/exercise/activity')!!}"><i class='fa fa-list-ol fa-fw'></i> Listar
</a>
</li>
</ul>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="config")?"class=\"active\"":"");}?> >
<i class="fa fa-cogs fa-fw"></i> Configuración<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="personal")?"class=\"active\"":"");?>
href="{!!URL::to('/config/personal')!!}"><i class='glyphicon glyphicon-user'></i> Información personal
</a>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="mail")?"class=\"active\"":"");}?> >
<i class="glyphicon glyphicon-envelope"></i> Enviar Comunicado
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
#yield('content')
</div>
</div>
<!-- /#wrapper -->
</body>
The css for this:
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
#media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
}
}
.navbar-top-links {
margin-right: 0;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
Thanks.
you have to adjust the padding for the minimum screen size:
for example,
.nav-bar{
padding-top : xxpx;
}
putting the above on the css, obviously will apply to any screen size.
#media(min-width:416px) {
.nav-bar{
padding-top : /*your value*/px;
}
}
The above will make sure that the necessary padding level will be set only after the screen size reaches the 416px amount.
This was just an example amount I got to an iPhone 6 screen with assumed css classes, make sure you play around with the values for your relevant css classes to get whats most ideal for you.
Related
I am triying to figure out why my toggle icon is not showed,and why the nav bar is not showing the menu elements when I use the mobile view.
I have created a border to see if the icon is there,and I can see the red frame,but when I click on it,does not work,and is not showing any content.
Can someone please help me.
This is my code so far:
<header>
<div class="jumbotron">
<div class="container text-center">
<div class="intro-video">
<video class="videobaner" id="video" preload autoplay="true" loop="loop" muted="muted" volume="0">
<source src="img/background.mp4" type="video/mp4">
<source type="video/webm" src="img/theremin2.mp4"></source>
</video>
</div>
</div>
</header>
<nav class="navbar navbar-expand-md" style="width:auto;background-color:black;">
<div class="container-fluid mb-2 mt-2">
<div class="navbar-collapse collapse flex justify-content-md-center">
<ul class="navbar-nav mr-auto align-center">
<li class="nav-item">
<a class="nav-link" href="music.php"> MUSIC </a>
</li>
<li class="nav-item">
<a class="nav-link" href="events.php"> EVENTS </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">FEATURED</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="arts.php">ARTS</a></li>
<li><a class="dropdown-item" href="blog.php">BLOG</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SUBSCRIPTION </a>
</li>
</ul>
</div>
<div class="d-flex flex-md-fill flex-shrink-1 d-md-none">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsenav">
<span class="navbar-toggler-icon"style="color:white;border:2px solid red;"></span>
</button>
</div>
</div>
</div>
</nav>
<style>
header .jumbotron{
position: relative;
background-color: black;
height: 100%;
min-height: 40rem;
width: 100%;
overflow: hidden;
}
nav {
opacity: 80%;
padding: 20px;
/* position: relative; */
z-index: 9999;
margin: 0;
width: 50%;
left: 0px;
right: 0px;
bottom:0px;
border-radius: 1px;
color: white !important;
}
.container-fluid {
height:30px;
}
nav ul {
text-transform: uppercase;
padding:20px 35px;
margin: 0;
font-size: .450rem;
font-weight: 400;
color: white!important;
}
nav ul li {
display:inline-block;
text-align: center;
padding:20px 35px;
height: 1%;
}
nav ul a {
height:35px;
line-height:20px;
padding:16px 32px;
margin: 4px 2px;
color:white !important;
font-size: 20px;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
text-decoration:none;
}
nav ul a:hover {
padding: 20px;
border-radius: 15px;
color: white!important;
}
</style>
Bootstrap5 uses data-bs-toggle and data-bs-target for the toggler. Change
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsenav">
<span class="navbar-toggler-icon"style="color:white;border:2px solid red;"></span>
</button>
to
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".collapsenav">
<span class="navbar-toggler-icon" style="color:white;border:2px solid red;"></span>
</button>
More on the Bootstrap5 toggler
href is not able to clickable on carousel due to jQuery
Carousel is using jQuery for automated sliding and when I'm placing an element with a href tag it's not working, also as the project is using multiple JavaScript files for fast uploading. I'm not able to identify how to make href clickable on carousel.
How can I overwrite existing jQuery to make only that particular href clickable?
<li class="ds cover-image animated scaleAppear">
<img src="<?php echo $Domain;?>img/slide2.jpg" alt="img">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row text-center" style="text-align:center;">
<div id="arrow-left" class="arrow">
<div class="col-sm-6 ">
<h6 id="firstLineh6"><span style="font-size:50px;">■</span>Farming-as-a-Service</h6>
<h1 id="firstLineh1">Advance,Affordable,<br>Accessible</h1>
<div class="vertical">
<p id="contP">
We are making advanced farm mechanization services affordable to farmers through the
Pay and Use Model
</p>
</div>
<a id="carbtn1" href="https://google.com">Traxi Customer</a>
<a id="carbtn2" href="https://google.com">Traxi Partner</a>
<div class="col-sm-6 fade-in text-center" style="text-align:right;"></div>
</div>
<div class="intro_layers_wrapper">
<div class="intro_layers">
<!-- <div class="intro_layer">
<p class="intro_before_featured_word pTextSize">Looking For Mechanized Crop Cultivation? </p>
<p class="text-capitalize intro_featured_word pTextSize"> We are the "Solution" </p>
<br>
Tell Us Your Farming Need
</div> -->
</div>
</div>
</div>
</div>
</div>
</li>
Hey there as I got that your all links working with above code.
https://imgur.com/a/DeZd2K9
But if you still facing issue with your Code you can try given below code for slider-
.bs-fullscreen {
height: 100%;
}
.bs-fullscreen .carousel,
.bs-fullscreen .item,
.bs-fullscreen .active {
height: 100%;
}
.bs-fullscreen .carousel-inner {
height: 100%;
}
.carousel-bg .carousel-inner .item {
background-color: darkslategrey;
background-size: cover;
background-position: center;
min-height: 664px;
}
.banner-text {
position: absolute !important;
top: 215px;
left: 12%;
background: rgba(0, 0, 0, 0.5);
padding: 47px 80px;
}
.banner-text p {
font-size: 16px;
font-family: 'Roboto';
color: #fff;
font-weight: 600;
}
.banner-text h2 {
font-size: 42px;
font-family: 'Poppins';
font-weight: 600;
color: #fff;
line-height: 44px;
}
.banner-text a {
font-size: 16px;
color: #000;
font-weight: 800;
background: #fff;
padding: 10px 20px;
font-family: 'Roboto';
}
.banner-text span {
font-size: 48px !important;
}
#media only screen and (max-width:600px) {
.banner-text span {
font-size: 34px !important;
}
}
#media only screen and (max-width:400px) {
.banner-text {
position: center;
}
}
<!doctype html>
<html>
<body>
<div class="bs-fullscreen">
<div id="carousel-example" class="carousel slide carousel-bg" data-ride="carousel" data-interval="3000">
<!-- Bottom dots {indicators} -->
<div class="carousel-inner" role="listbox">
<div class="item active"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/4-3-1.jpg);">
<div class="banner-text">
<p>Eco Friendly | Feathery Light Perfect Fit</p>
<h2>50 WASH <br><span>UNDERWEARS</span></h2>
Shop Collection
</div>
</div>
<div class="item mob-banner"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/Desktop-View-Home-Page-banner-1280x720px-1.jpg);">
<div class="banner-text">
<p>Memory Stretch | Skinny Soft Modal</p>
<h2>CONFIDENCE <br><span>INSIDE</span></h2>
Shop Collection
</div>
</div>
<div class="item mob-banner1"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/Confidence-INSIDE-MOBILE-SLIDER-1280-%C3%97-720px.png);">
<div class="banner-text">
<p>Memory Stretch | Skinny Soft Modal</p>
<h2>CONFIDENCE <br><span>INSIDE</span></h2>
Shop Collection
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</body>
</html>
Hope you like the answer.
I'm trying to make this form:
https://imgur.com/CMzcRjp
I have this now but have a few issues.
The hover needs a border-radius
Need font a fontawesome icon on right top corner
How can i change the color of the icon
The there are three different boxes but only one can be selected. What is the right way to program it.
Also need to add php later but how.
/* CHECKOUT FORM */
.selection-box {
width: 255px;
height: 180px;
margin: 20px 0px 20px 0px;
padding: 30px;
border: 1px solid #E3E4EA;
border-radius: 6px;
color: #5A637F;
text-align: center;
font-style: oblique;
font-weight: 600;
background-color: #F7F7FA;
}
.selection-box:hover {
outline: 5px solid #76A7E1;
border-radius: 6px;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0;
-webkit-font-smoothing: antialiased;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
color: #54637F;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<h1><strong style="font-size: 16px;">Stap 1: kies uw pakket</strong></h1>
<div class="row">
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-fighter-jet fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
</div>
Look this: https://codepen.io/Luis4raujo/pen/JrLRMp
U need hide .icon and with javascript show it.
/* CHECKOUT FORM */
.selection-box {
width: 255px;
height: 180px;
margin: 20px 0px 20px 0px;
padding: 30px;
border: 1px solid #E3E4EA;
border-radius: 6px;
color: #5A637F;
text-align: center;
font-style: oblique;
font-weight: 600;
background-color: #F7F7FA;
}
.selection-box:hover {
border: 5px solid #76A7E1;
border-radius: 6px;
}
body {
font-family: 'Raleway', sans-serif;
margin: 0;
-webkit-font-smoothing: antialiased;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
color: #54637F;
}
.icon{
border-radius: 15px;
width:30px;
height:30px;
background-color:#76A7E1;
position:relative;
top:40px;
left:235px;
/*display:none;*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<h1><strong style="font-size: 16px;">Stap 1: kies uw pakket</strong></h1>
<div class="row">
<div class="col-sm-4">
<div class="icon"></div>
<div class="selection-box">
<i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget akket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-fighter-jet fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
</div>
you may try this it may help you No need to use Javascript for this case
<ul id="theme-options1" class="nav nav-pills custom">
<li class="active">
<a data-toggle="tab" id="theme1" data-id="1">
<i class="fa fa-check them-Selected" aria-hidden="true" ></i>
</a>
</li>
<li>
<a data-toggle="tab" id="theme2" data-id="2">
<i class="fa fa-check them-Selected" aria-hidden="true"></i>
</a>
</li>
<li>
<a data-toggle="tab" id="theme3" data-id="3">
<i class="fa fa-check them-Selected" aria-hidden="true"></i>
</a>
</li>
<li>
<a data-toggle="tab" id="theme4" data-id="4">
<i class="fa fa-check them-Selected" aria-hidden="true"></i>
</a>
</li>
</ul>
Here is the Working fiddle
How to place toggle (show/hide) button near parent element?
When I press button to show child elements, this button jumps to the bottom of list, but I need it to stay in place - near parent element.
An example of current situation is under the question.
$(".has_children").append("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
$("button").click(function() {
$(this).prev().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-32">Parent product category2
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27">Parent product category3
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
Add the button before the child element.And in jquery toggle the element next to the button
$(".has_children").find('ul.children').each(function(){
var html = $("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
html.insertBefore($(this));
})
$("button").click(function() {
$(this).next().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<!--<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
</li>
<li class="cat-item cat-item-32 has_children">Parent product category2
<!-- <button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27 has_children">Parent product category3
<!-- <button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
This works:
$(".has_children>a").after("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
$("button").click(function() {
$(this).next().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-32">Parent product category2
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27">Parent product category3
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
I am getting the following result in my web browser:
The checkmarks appear slightly raised with respect to the text, but I would like the text to be all lined up. What should I do?
I have the following HTML:
<ul class="train">
<li>
<p><?php echo $pageContents->getContents("comptrainLI1"); ?></p>
<ul class="traininner">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>PHP</li>
<li>SQL</li>
<li>WordPress CMS</li>
<li>Magento CMS</li>
</ul>
</li>
<li>
<p><?php echo $pageContents->getContents("comptrainLI2"); ?></p>
<ul class="traininner">
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>Java</li>
</ul>
</li>
</ul>
and CSS:
div#mainContent ul.train {
list-style-position: inside;
list-style-image: url("../images/checkmark-round-whiteOnGreen.jpg");
font-size: 18pt;
}
div#mainContent ul.train ul.traininner {
padding-left: 20px;
list-style-image: url("../images/checkmark-round-whiteOnGreen.jpg");
}
I don't think it's possible to know the reason for the misalignment based on the limited code you posted in your question. It could be something in your PHP. So I've posted a general solution.
li {
list-style-type: none;
margin-bottom: 5px;
}
ul.traininner li::before {
content: '';
display: inline-block;
vertical-align: bottom;
padding: 10px 20px 0 0;
height: 10px;
width: 10px;
background-image: url("http://i.imgur.com/F05JSPD.png");
background-repeat: no-repeat;
}
<ul class="train">
<li>
<ul class="traininner">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>PHP</li>
<li>SQL</li>
<li>WordPress CMS</li>
<li>Magento CMS</li>
</ul>
</li>
<li>
<ul class="traininner">
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>Java</li>
</ul>
</li>
</ul>
jsFiddle