prev and next arrows

gotmaester · Member · Aug 26, 2017 at 11:09 pm
Copy link

Add topic to favorites
How does one copy the navigation ARROWS used for previous and next posts? I am just looking for a way to manually add the arrows and have already manually added the links.

I want to use the same kind of arrows on the second page below as are on the first.

1. POST: https://game-of-thrones-episodes.com/2017/07/31/jon-snow-arrives-at-dragonstone/
2. PAGE: https://game-of-thrones-episodes.com/703-the-queens-justice/

Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 28, 2017 at 4:30 am
Copy link
Here are the two spans which you can use with the links you have manually created.
←

→
gotmaester · Member · Aug 28, 2017 at 5:05 am
Copy link
That works great. I am just curious. Why have the span class, and not just insert the arrows, what does the “meta-nav” do? It look like the arrows are different sizes above, but on the page they look the same. Why is that?

Thanks for your help.
gotmaester · Member · Aug 28, 2017 at 5:08 am
Copy link
That works great. I am just curious. Why have the span class, and not just insert the arrows, what does the “meta-nav” do? It look like the arrows are different sizes above, but on the page they look the same. Why is that?

Thanks for your help.
gotmaester · Member · Aug 28, 2017 at 5:08 am
Copy link
This darn apple mouse, it so sensitive. Sorry about the double post.
gotmaester · Member · Aug 28, 2017 at 5:37 am
Copy link
Okay, I am making progress on this. Initially, when I inserted the spans I did it this way

← Episode 705

But really, I should do it this way, right?

← Episode 705

Now, if I am learning this right, is there CSS selectors which go with this meta-nav tag? I noticed that the automatic ones are all capitalized, so why isn’t what I have inside the span above not capitalized on the page?
thesacredpath · Member · Aug 28, 2017 at 5:42 am
Copy link
Although the span has a CSS class, there isn’t any actual CSS to go with it, but if you wished, you could style that arrow and the text differently simply by adding the CSS rule with your styling.
gotmaester · Member · Aug 28, 2017 at 5:44 am
Copy link
ooooh, let me try that…I will check back with you and let you know if I was able to do it myself. Thanks. Give me about 5 minutes.
gotmaester · Member · Aug 28, 2017 at 5:49 am
Copy link
okay, I need help… this is what I wrote, but it appears to have no effect.

.meta-nav {
text-transform: capitalize;
}
kathrynwp · Staff · Aug 28, 2017 at 1:59 pm
Copy link
Could you link me to a page where you’ve added your new navigation element so I can take a look directly?
gotmaester · Member · Aug 28, 2017 at 2:01 pm
Copy link
https://game-of-thrones-episodes.com/706-beyond-the-wall/
kathrynwp · Staff · Aug 28, 2017 at 2:09 pm
Copy link
Thanks! Your navigation appears to be displaying as expected.

The “capitalize” property capitalizes the first letter of each word, so “Episode 705” and “Episode 707” are what I’d expect to see. If you’d like to change that to all capital letters, then this should do the trick instead:
```
.meta-nav {
  text-transform: uppercase;
}
```
gotmaester · Member · Aug 28, 2017 at 2:14 pm
Copy link
yes!!!! I was up late last night. Thanks.

No items found.