Solved Helix Framework

blog navigation

Asked by Robert 4 years ago Last activity 4 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?

Accepted answer

Marked as the solution

Robert Asked this

4 years ago

Toufiq,

You're GREAT!!!

Thank you so much!

5 more replies

Toufiq Senior Staff

4 years ago

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

Robert Asked this

4 years ago

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

Toufiq Senior Staff

4 years ago

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;
}

Robert Asked this

4 years ago · edited

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....

Toufiq Senior Staff

4 years ago

Also, add this css code.

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