Page 1 of 1
Move Breadcrumbs to the left
Posted: Wed Sep 13, 2017 10:24 pm
by designsbycm
Version 2018
I have eliminated the Content Header title because having it and Breadcrumbs both is silly. So, how do I get the Breadcrumbs to float to the left? I've already added:
.content-header > .breadcrumb {
float: left;
}
to the stylesheet; but, it's not working.
???
Re: Move Breadcrumbs to the left ...?
Posted: Thu Sep 14, 2017 12:16 am
by designsbycm
Ok ... figure it out ... here's the User Styles I came up with (just copy and paste them right into PHPMaker) and these will get rid of the header title (useless) and scoot the Breadcrumbs to the left and adjust for responsive. AND, I added coding for changing that "sidebar-menu" header color, as that was impossible to get changed:
/* do not display header and move breadcrumbs to the left */
.content-header h1 {
display: none;
}
.content {
clear: both;
margin-top: 20px;
}
.content-header {
float: left;
margin-left: 15px;
}
.content-header >.breadcrumb {
position: relative;
padding: 5px 0 15px 0;
background: transparent;
margin: 0;
font-size: 24px;
font-weight: bold;
}
/* home icon */
span.glyphicon.glyphicon-home.ewIcon {
font-size: 22px;
}
.content-header >.breadcrumb li:before{
color: none;
}
/* breadcrumbs coloring and size */
#ewPageCaption {
font-size: 24px;
font-weight: bold;
color: black;
}
/* sidebar header coloring */
.sidebar-menu li.header {
font-size: 20px;
color: #cac9c9;
}
body[class^=skin-]:not([class$=-light]) li.header{
color: #cac9c9;
}
@media (max-width: 991px){
.content-header >.breadcrumb{
position: relative;
padding: 5px 0 15px 0;
background: transparent;
margin: 0;
font-size: 20px;
font-weight: bold;
}
.content-header > .breadcrumb li:before {
color: none;
}
span.glyphicon.glyphicon-home.ewIcon {
font-size: 18px;
}
#ewPageCaption{
font-size: 20px;
font-weight: bold;
color: black;
}
}
Enjoy!
Re: Move Breadcrumbs to the left
Posted: Tue Feb 20, 2018 8:27 pm
by bobmulder5555
Very nice & works like a charm! Thank you.