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.