Essential grid

Hi there:

ESSENTIAL GRID

  1. navigation : How to remove “sort by none” in the navigation
  2. color navigation:
    • Font-family : nunito (as the website)
    • Font-color:# E98623
    • Border: :#E98623
    • Button background: :transparent
    • Hover: : rgba(233, 134, 35, 0.82)

As the doc enclosed

  1. Filter order : How to we change filter order. For example, “site vitrine” first

FEATURE BOX
The logo is way to big for medium and small devices. What the media query to decrease by 70%.

Cheers and thanks

1 Like

Hi there,

To remove the Sort By option kindly add the CSS code below to X > Launch > Options > CSS:

.esg-sortbutton {
	display: none !important;
}

.esg-sortbutton-order {
	margin-bottom: 5px;
}

What do you mean by color navigation? Would you please give us more detailed information to be able to help you around?

For the order of the filters please kindly add the code below to X > Launch > Options > CSS:

.esg-filter-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.esg-filter-wrapper .esg-filterbutton:nth-child(1) {
	order:  1;
}
.esg-filter-wrapper .esg-filterbutton:nth-child(2) {
	order:  2;
}
.esg-filter-wrapper .esg-filterbutton:nth-child(3) {
	order:  3;
}
.esg-filter-wrapper .esg-filterbutton:nth-child(4) {
	order:  4;
}
.esg-filter-wrapper .esg-filterbutton:nth-child(5) {
	order:  5;
}
.esg-filter-wrapper .esg-filterbutton:nth-child(6) {
	order:  6;
}
.esg-filter-wrapper .esg-filterbutton:nth-child(7) {
	order:  7;
}
.esg-filter-wrapper .esg-filterbutton:nth-child(8) {
	order:  8;
}
.esg-filter-wrapper .esg-filterbutton:nth-child(9) {
	order:  9;
}

In the code above change the order numbers as you like.

Please consider that the options you like is part of customization process and Essential Grids does not have such functionalities and the codes given is to help you get started with the customization. We will not be able to implement the customization for you.

For the Feature Box logo, I think the 468 pixels will be a good point. Kindly add a code like the one below:

@media (max-width: 468px) {
	.x-feature-box-graphic img {
		max-width:  80px;
	}
}

Thank you.

Hi there,

  1. This is the style of the navigation button.
    Orange font, and orange button border

  2. Can you give me the media query just for the 2 links. I need to add a class, right?

Cheers and thanks

Hi there,

  1. You mean the gray filter buttons? If yes, please add this as well
.flat-dark .esg-filterbutton, .flat-dark .esg-navigationbutton, .flat-dark .esg-sortbutton, .flat-dark .esg-cartbutton {
    color: #E98623;
    border: 2px solid #E98623;
    font-family: "nunito",sans-serif;
    background: transparent;
}
.flat-dark .esg-navigationbutton:hover, .flat-dark .esg-filterbutton:hover, .flat-dark .esg-sortbutton:hover, .flat-dark .esg-sortbutton-order:hover, .flat-dark .esg-cartbutton-order:hover, .flat-dark .esg-filterbutton.selected {
    color: rgba(233, 134, 35, 0.82);
    border-color: rgba(233, 134, 35, 0.82);
    background: transparent;
}
  1. What two links? You mean the button?

Thanks!

Hi there,

  • This CSS doesn’t work :

.flat-dark .esg-filterbutton, .flat-dark .esg-navigationbutton, .flat-dark .esg-sortbutton, .flat-dark .esg-cartbutton {
color: #E98623;
border: 2px solid #E98623;
font-family: “nunito”,sans-serif;
background: transparent;
}
.flat-dark .esg-navigationbutton:hover, .flat-dark .esg-filterbutton:hover, .flat-dark .esg-sortbutton:hover, .flat-dark .esg-sortbutton-order:hover, .flat-dark .esg-cartbutton-order:hover, .flat-dark .esg-filterbutton.selected {
color: rgba(233, 134, 35, 0.82);
border-color: rgba(233, 134, 35, 0.82);
background: transparent;
}

Cheers and thanks

Hi there,

  1. Ah, it’s being overridden by grid’s core CSS, please add !important
.flat-dark .esg-filterbutton, .flat-dark .esg-navigationbutton, .flat-dark .esg-sortbutton, .flat-dark .esg-cartbutton {
    color: #E98623 !important;
    border: 2px solid #E98623 !important;
    font-family: "nunito",sans-serif !important;
    background: transparent !important;
}
.flat-dark .esg-navigationbutton:hover, .flat-dark .esg-filterbutton:hover, .flat-dark .esg-sortbutton:hover, .flat-dark .esg-sortbutton-order:hover, .flat-dark .esg-cartbutton-order:hover, .flat-dark .esg-filterbutton.selected {
    color: rgba(233, 134, 35, 0.82) !important;
    border-color: rgba(233, 134, 35, 0.82) !important;
    background: transparent !important;
}
  1. Ah, I thought you’re referring to links element like <a></a>, thanks for providing the URLs again. Yes, you’ll need to add class to your CSS targeting those pages.
@media (max-width: 468px) {
	.page-id-2232 .x-feature-box-graphic img {
		max-width:  80px;
	}
	.page-id-2321 .x-feature-box-graphic img {
		max-width:  80px;
	}
}

Then you can simply change the width value, and to find your page’s ID, then please check this https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Hope these help.