Move Breadcrumbs to the left

Tips submitted by PHPMaker users
Post Reply
designsbycm
User
Posts: 7

Move Breadcrumbs to the left

Post 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.

???


designsbycm
User
Posts: 7

Post 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!


bobmulder5555
User
Posts: 60

Post by bobmulder5555 »

Very nice & works like a charm! Thank you.


Post Reply