Position Navigation Essential Grid Arrows

[guybower1]

hi

I have an Essential Grid and am wanting to position the navigation arrows.

I have been able to use CSS to style the arrows, removing borders and backgrounds, but the arrows themselves seem to want to sit at the 50% point of the entire grid item. I’d like to try and get them to sit at the 50% point of just the media (image), so excluding the text below it. I know there would be a way if I add the arrows separately using the shortcode available [ess_grid_nav id="right" alias="food tours"] & [ess_grid_nav id="left" alias="food tours"], but this seems a cumbersome way to do it

Here is where the arrows currently sit

As you can see, the arrows sit towards the bottom of the image, though are actually halfway of the entire content

Is this possible at all to have the arrows vertically aligned halfway up the image?

I found the following code at one of the forums and adjusted the selector so it is targeting my arrows

Original

.esg-filters.esg-singlefilters.esg-navbutton-solo-left,
.esg-filters.esg-singlefilters.esg-navbutton-solo-right {
top: auto !important;
bottom: 25% !important;
}

For my buttons

.minimal-light .esg-navigationbutton.esg-left, 
.minimal-light .esg-navigationbutton.esg-right {
    background-color: none;
    border: none;
    border-color: none !important;
    top: auto !important;
    bottom: 25% !important;
}

The colour and border items work fine, but unfortunately, regardless what I do with the either the bottom or top figures, the arrows do not move.

Any suggestions on how to alter the vertical alignment?

Regards

[ruenel]

Hello @guybower1,

Thanks for writing in! We cannot check whether your code works or using the correct CSS selectors. Please provide us the url of the page where we can find the grid so that we can check it out. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers.

[guybower1]

Hi Ruenel

Thanks so much for your reply

This is a section page on my staging server so not yet published. I am just testing it.

The URL is http://wordpress-102462-558755.cloudwaysapps.com/?page_id=11511

I have also given you login details should you need them

Regards

[ruenel]

Hello @guybower1,

The default top position of the arrows is 50% of the grid height. If you want to position it at the center of the featured image, you may reduce it to at least 30%.

.esg-filters.esg-singlefilters.esg-navbutton-solo-left,
.esg-filters.esg-singlefilters.esg-navbutton-solo-right {
    top: 30% !important;
    bottom: auto !important;
}

Please let us know if this works out for you.

[guybower1]

Hi Ruenel

Thanks so much for that. In the end, 32% worked to get it about perfect; I just need to check if that is the case through all the break points.

I increased the font size to 24, but for whatever reason, the font weight parameter does not seem to alter the appearance.

I even searched back through the theme.co archives and found a thread from 2017 where the selector to use for adjusting the font weight was the following

.eg-icon-left-open .eg-icon-right-open {
  font-weight: 100;
}

In that thread you suggested the customer add !important to achieve a lighter arrow. I have tried that code, but also to no avail.

I have used the following selectors so far, yet none has worked

.esg-filters.esg-singlefilters.esg-navbutton-solo-left,
.esg-filters.esg-singlefilters.esg-navbutton-solo-right
.minimal-light .esg-navigationbutton.esg-left,
.minimal-light .esg-navigationbutton.esg-right
.esg-navigationbutton.esg-left.esg-fgc-57
.esg-navigationbutton.esg-right.esg-fgc-57
.eg-icon-left-open
.eg-icon-right-open

I’m kind of running out of selectors.

Any thoughts as to why everything bar the weight of the arrow can be adjusted using selectors above?

Thanks again for your reply

[christian]

Hey @guybower1,

The font weight of the arrow can’t be changed because the EG Fonts only provides 1 weight and that is what you see now. With that said, even targeting the icon correctly will show no result. There’s no way to change that unless you’ll load up your own custom font and change the icon’s font-family using CSS.

I’d recommend leaving the font weight as is or consult with a developer to load up your font icon whether using a plugin or custom code and then override the CSS of the arrow.

Thanks.

[guybower1]

ah thanks for that reply Christian

OK, I will leave the weight as is for now. It was starting to do my head in, as had used every selector I could find

Thanks again

[jade]

You’re welcome, @guybower1.