Blog Navigation - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Blog Navigation

R

Robert

Helix Framework 3 years ago

Hi,

I'm using the latest Helix Ultimate 3 and Joomla 4 in which I have a blog with several articles. The standard navigation 'previous' and 'next' are both on the left side at the bottom of the article.

How can I make the previous navigation arrow at the left side and the next navigation on the right side?

Some extra info: Showing the above on your demo of Helix Ultime 2.07 it looks like this: https://robsplace.nl/info/Screenshot_1.png This is what I need!!

After installing your quickstart pack - Joomla 4 on my localhost it looks like: https://robsplace.nl/info/Screenshot_2.png This is exactly the same as it is on my blog..... what I do not like!!! Apparently this is the standard situation.

I presume it is possible to realize the situation as in Screenshot_1.png by using custom.css...can somebody help me with this?

0
6 Answers
Order by
Oldest Newest Votes
R
Robert
Accepted Answer
3 years ago #67013

Toufiq,

You're GREAT!!!

Thank you so much!

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #66858

Hi there,

Thanks for contacting us. Sorry for the inconvenience. Will you please provide me the Joomla administrator access to check the issue? I will check & get back to you soon. 

-Thanks

0
R
Robert
Accepted Answer
3 years ago #66883

Hi Toufiq,

Thanks for the reply. I'm working local for testing, so I cannot provide you administrator access.

As I mentioned I am using the most recent software, local I use pHp 8.0.5 and MySql 5.7.34 (wamp64) on a complete updated Windows 10 pc.

I use Firefox and tried to see was used with F12.... I could not find the solution.... :-(

Hope you can help anyway,

-Thanks

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #66980

Add this css code inside the custom.css file.

nav.pagenavigation {justify-content: space-between;}

.pagenavigation ul.pagination {justify-content: space-between;}

.page-item:first-child .page-link {
    border-top-left-radius: initial;
    border-bottom-left-radius: initial;
    border-radius: 100px;
}
0
R
Robert
Accepted Answer
3 years ago #67009

Hi Toufiq,

Thank you so far... GREAT! The main problem (navigation-buttons left and right) is solved.... but, please, take a look at the image below...

https://robsplace.nl/info/Screenshot.png

Left border with 100% radius, right with square border....

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #67010

Also, add this css code. 

.page-item:last-child .page-link {
    border-top-right-radius: initial;
    border-bottom-right-radius: initial;
    border-radius: 100px;
}
0