Ethos Post and Portfolio Navigation changes

[pkingco]

Hi,

I may have gotten a little deeper then I intended, but hoping you might be able to help.
So I wanted to stylize and shift the Ethos Post and Portfolio pages Navigation, and I found a previous topic that helped get me part of the way, but now I’m a bit stuck. I updated the “Functions.php”, and the css.

I changed the navigation stylistically, but now there are a few issues.

1. I get a strange hover. It’s a brown circle, and I’m not sure where it’s coming from.
2. I hoped to move the “previous” all the way to the left and keep the “Next” on the right.
3. I wanted to move the portfolio nav from above the portfolio content to below.
4. The portfolios have a return to index button but it’s not working. And I’m looking to do something different anyway.

I’ve included a few screen shots to illustrate what is happening currently and the desired outcome.

Thanks in advance for your time.
I’ll include my login info in a secure post after this.

Garet

[christopher]

Hi there,

I am sure that you will understand this is a complete customization related question and is indeed out of our support scope. Our theme does not have the layout you have mentioned and if you can not continue the customization you will need to consider hiring a freelance developer from the X Facebook User Group.

Having said that I see that you already added a section with the desired layout in one of the portfolio items:

So it will be easy to hide the above default theme navigation and add a javascript to trigger the same click event when the ones at the bottom are clicked.

Please kindly add the CSS code below to Pro > Launch > Theme Options > CSS:

.single .entry-top-navigation {
    display: none;
}

.single .x-text .arrow_carrot-right_alt2,
.single .x-text .arrow_carrot-left_alt2,
.single .x-anchor-content {
    cursor: pointer;
}

Please kindly add the Javascript code below to Pro > Launch > Theme Options > JS:

(function( $ ) {
	$(function() {

		$('.single .x-text .arrow_carrot-right_alt2').on('click', function() {
			var theLink = $('.single .x-nav-articles .next').attr('href');
			window.location.href = theLink;
		});

		$('.single .x-text .arrow_carrot-left_alt2').on('click', function() {
			var theLink = $('.single .x-nav-articles .prev').attr('href');
			window.location.href = theLink;
		});

	});
})(jQuery);

The drawback of this method is that you need to add that last section for every and each portfolio and blog post.

Unfortunately, we cannot be of a help for the first method as it involves a great deal of customization.

Thank you for your understanding.

[pkingco]

Hi Christopher,

Thanks so much for the response. I completely understand that this was getting outside the scope of support. Not a problem.

And I would like to thank you, for the last bit of code and javascript at the end. That for me is almost perfect. I will be building page templates for all portfolio and blog post pages, so adding that last section for each page is a simple task thanks to the amazing features you guys have built into this theme.

Just one more little thing and I hope it’s not outside the support scope. For the java code, is there anyway to add to it, to keep the portfolio pages looping back to the beginning once you’ve reached the end? What I mean to say is once you hit the last portfolio page when you click on next it goes to an undefined page. "The page you are looking for is no longer here…"and visa versa if you are on the first page and click on previous you get the same thing.

I was just hoping there could be continuous loop. If that is too complicated please let me know. You’re assistance has been above and beyond.

Thanks again

Garet

[christopher]

Hi there,

The problem is caused by the fact that the Javascript code that I have suggested does not take into account if the Prev/Next button is not available in the code to trigger the clicked item. You can change the code to this:

(function( $ ) {
	$(function() {

		if (!$('.single .x-nav-articles .next').length) {
			$('.single .x-text .arrow_carrot-right_alt2').css('opacity', '0.5').css('pointer-events', 'none');
		}

		if (!$('.single .x-nav-articles .prev').length) {
			$('.single .x-text .arrow_carrot-left_alt2').css('opacity', '0.5').css('pointer-events', 'none');
		}

		$('.single .x-text .arrow_carrot-right_alt2').on('click', function() {
			var theLink = $('.single .x-nav-articles .next').attr('href');
			window.location.href = theLink;
		});

		$('.single .x-text .arrow_carrot-left_alt2').on('click', function() {
			var theLink = $('.single .x-nav-articles .prev').attr('href');
			window.location.href = theLink;
		});

	});
})(jQuery);

The code above checks if the Next/Prev item which is generated by the theme is actually available, if not it makes the opacity of the counterpart button in the footer in half and removes the click functionality.

So you will have a bulletproof way when the portfolio item is the last or first item.

Changing the code in a way that it loops to the first or last portfolio item needs much more coding which is outside of our support scope.

Thank you.