Align essential grid

[ifkda]

Hi there,

I would like to align the navigation to the left, as opposed to the centre. Have tried to do this, but can’t manage.

The page is here: akinyoga.com/catalogue/

I will give you the details

   /********************************
	-	FLAT DARK 3.0.0 SKIN -
*********************************/

.flat-dark .navigationbuttons,
.flat-dark .esg-pagination,
.flat-dark .esg-filters {
	text-transform: uppercase;
	text-align: center;
}

.flat-dark .esg-filter-wrapper.dropdownstyle>.esg-selected-filterbutton,
.flat-dark input.eg-search-input,
.flat-dark .esg-filterbutton,
.flat-dark .esg-navigationbutton,
.flat-dark .esg-sortbutton,
.flat-dark .esg-cartbutton,
.flat-dark .esg-filter-wrapper.eg-search-wrapper  .eg-search-clean,
.flat-dark .esg-filter-wrapper.eg-search-wrapper  .eg-search-submit {
	color: #000000;
	margin-right: 5px;
	cursor: pointer;
	position: relative;
	z-index: 2;
	padding: 1px 30px;
	border: none;
	line-height: 38px;
	border-radius: 0px;
	font-size: 15px;
	font-weight: 500;
	font-family: "poppins", sans-serif;
	display: inline-block;
	background: #f6f6f6;
	margin-bottom: 5px;
	white-space: nowrap;
	min-height: 38px;
	vertical-align: middle;
   text-transform: lowercase;
  letter-spacing: 0.1em;
}

.flat-dark .esg-cartbutton a {
	color:#000000;
}

.flat-dark input.eg-search-input::placeholder {
	line-height: 38px;
	vertical-align: middle;
	color:#000000;
}

.flat-dark .esg-navigationbutton {
	padding: 2px 12px;
}

.flat-dark .esg-navigationbutton * {
	color: #000000;
}

.flat-dark .esg-pagination-button:last-child {
	margin-right: 0;
}

.flat-dark .esg-sortbutton-wrapper,
.flat-dark .esg-cartbutton-wrapper {
	display: inline-block;
}

.flat-dark .esg-sortbutton-order,
.flat-dark .esg-cartbutton-order {
	display: inline-block;
	vertical-align: top;
	border: none;
	width: 40px;
	line-height: 40px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.2);
	margin-left: 5px;
}

.flat-dark .esg-cartbutton {
	color: #fff;
	cursor: default !important;
}

.flat-dark .esg-cartbutton .esgicon-basket {
	color: #fff;
	font-size: 15px;
	line-height: 15px;
	margin-right: 10px;
}

.flat-dark .esg-cartbutton-wrapper {
	cursor: default !important;
}

.flat-dark .esg-sortbutton,
.flat-dark .esg-cartbutton {
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-right: 0px;
	border-radius: 5px;
}

.flat-dark input.eg-search-input.hovered,
.flat-dark input.eg-search-input:focus,
.flat-dark .esg-navigationbutton.hovered,
.flat-dark .esg-filterbutton.hovered,
.flat-dark .esg-sortbutton.hovered,
.flat-dark .esg-sortbutton-order.hovered,
.flat-dark .esg-cartbutton-order.hovered,
.flat-dark .esg-filterbutton.selected,
.flat-dark .esg-filter-wrapper.dropdownstyle>.esg-selected-filterbutton.hovered,
.flat-dark .esg-filter-wrapper.dropdownstyle>.esg-selected-filterbutton.hoveredfilter,
.flat-dark .esg-cartbutton.hovered,
.flat-dark .esg-filter-wrapper.eg-search-wrapper  .eg-search-clean.hovered,
.flat-dark .esg-filter-wrapper.eg-search-wrapper  .eg-search-submit.hovered {
	border-color: none;
	color: #fff;
	background: #b5b5b5;
}

.flat-dark .esg-navigationbutton.hovered * {
	color: #fff;
}

.flat-dark .esg-sortbutton-order.hovered .tp-desc {
	color: #333;
}

.flat-dark .esg-filter-checked {
	color: transparent;
	background: rgba(0, 0, 0, 0.2);
	margin-left: 7px;
	font-size: 9px;
	font-weight: 300;
	line-height: 9px;
	vertical-align: middle;
}

.flat-dark .esg-filterbutton.selected .esg-filter-checked,
.flat-dark .esg-filterbutton.hovered .esg-filter-checked {
	color: #fff;
	background: rgba(0, 0, 0, 0.2);
}

.flat-dark .esg-filter-wrapper.eg-search-wrapper {
	white-space: nowrap;
}

.flat-dark .esg-filter-wrapper.eg-search-wrapper .eg-search-submit {
	margin-left: 5px;
}

.flat-dark .esg-filter-wrapper.eg-search-wrapper .eg-search-clean,
.flat-dark .esg-filter-wrapper.eg-search-wrapper .eg-search-submit {
	width:40px;
	padding:0px;
	margin-left: 5px;
	margin-right:0px;
}

.flat-dark .esg-filter-wrapper.eg-search-wrapper .eg-search-input {
	width:auto;
}

.flat-dark .esg-dropdown-wrapper {
	transform: translateZ(10px) translateX(-50%);
	left: 50%;
	background:transparent;
	padding:0px;
}

.flat-dark .esg-dropdown-wrapper .esg-filterbutton {
	position: relative;
	background:rgba(0,0,0,0.5);
}

.flat-dark .esg-dropdown-wrapper .esg-filterbutton.selected,
.flat-dark .esg-dropdown-wrapper .esg-filterbutton.hovered {
	background:rgba(0,0,0,0.75);
}


.flat-dark .esg-dropdown-wrapper .esg-filterbutton .esg-filter-checked {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	text-align: center;
	line-height: 12px
}

.flat-dark .esg-selected-filterbutton .eg-icon-down-open {
	margin-right:-10px;
	font-size:12px;
	color:#fff;
}

Thank you

[tristup]

Hi @ifkda,

Thanks for reaching out.
To make the filter aligned into the left, you need to add the following custom CSS code to Theme Options > CSS.

.flat-dark .esg-filters
{
    text-align:left !important;
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks