Start a new topic

CSS page navigation


With a view to avoid a mass of colours from too many images on a single page, I was looking at limiting the number of images to 25 so as to render visitors' experience more pleasant while at the same time enabling page to load faster. Where necessary, second/third... pages would be created and navigation would be using the following code:


.center {    text-align: center;  }   

.pagination {    display: inline-block;  }   

.pagination a {    background-color: #FAB001;    color: #AD0B00;    float: left;    padding: 8px 16px;    text-decoration: none;    transition: background-color .3s;    border: 1px solid #ddd;    border-radius: 5px;    margin: 0 4px;    font-size: 12px;  }   

.pagination {    color: #014bfa;    border: 1px solid #4CAF50;    border-radius: 5px;  }   

.pagination a:hover:not(.active) {background-color: #6c76f1;}  </style>  </head>  <body>   

<div class="center">    <div class="pagination">    <a href="#">HOME</a>    <a href="#">&laquo PREVIOUS</a>    <a href="#" class="active">1</a>    <a href="#">2</a>    <a href="#">3</a>    <a href="#">4</a>    <a href="#">5</a>    <a href="#">6</a>    <a href="#">NEXT &raquo;</a>   



Is this something that can be done.

Many thanks

Hello John!

Thank you for posting! I have enabled the custom code feature on your account, you can now enter your codes by going to Settings > Customize > CSS/JS tab. Some codes might damage your website that's why this option is disabled by default. Since you are familiar with coding, you can test your code using this feature. 

For the HTML code, you can write it by going to the page where you wish to display the output of the code. Then find the text editor inside that page and click the 3 vertical dots then select "Source". Enter your code at the very bottom and don't forget to click "Save".

Please be reminded that we don't guarantee that all codes will work with our service and we don't provide coding support.

Regarding the loading speed, I would also like to recommend that you check out the Image quality option on your Admin panel. This option will allow you to balance the quality of images and the loading speed of your site. 

I hope this helps! Have a good day John! 

Arvin (Forum Moderator) 


A huge thank you for your reply and the release of coding modules; the fundamentals of the page navigation widget works really well; details to consider are the colour-change of the numbers for the active page and positioning the nav bar at the bottom (may be...).


John M Santarossa

Hello John,

You're most welcome! For the nav bar at the bottom, you can use the "Bottom" Menu template or you can also use the footer section to add links as a menu if you want to keep the default menu at the top. 

If you have more questions in the future, please don't hesitate to give us a shout :) Enjoy your day John! 

Cheers, Arvin (Forum Moderator)

Login to post a comment