Title: Custom Navigation
Last modified: August 30, 2016

---

# Custom Navigation

 *  Resolved [stardrive](https://wordpress.org/support/users/stardrive/)
 * (@stardrive)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/custom-navigation-7/)
 * Please, how do i produce the custom navigation like the one in the first image
   of your screenshot?
 * Your CSS Code:
 * .wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none; border: 1px solid#
   BFBFBF; padding: 3px 5px; margin: 2px; }
 * is not creating an inner border, as in the first image of your screenshot
 * I get only an outer border when I add border: 1px solid #BFBFBF; to the upper
   CSS Code to give:
 * .wp-pagenavi {
    clear: both; border: 1px solid #BFBFBF; /* Added 4th Sept 2015*/}
 * Please, assist
 * Regards,
 * Stardrive
 * [https://wordpress.org/plugins/wp-pagenavi/](https://wordpress.org/plugins/wp-pagenavi/)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Lester Chan](https://wordpress.org/support/users/gamerz/)
 * (@gamerz)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/custom-navigation-7/#post-6511981)
 * I don’t provide support for customization.
 * So you have to figure it out yourself. In the first screenshot, I am using Bootstrap
   CSS and there is the CSS
 *     ```
       .pagination .wp-pagenavi a,
       .pagination .wp-pagenavi span {
       	float: left;
       	padding: 0 14px;
       	line-height: 34px;
       	text-decoration: none;
       	border: 1px solid #ccc;
       	border-left-width: 0;
       }
       .pagination .wp-pagenavi .pages {
       	border-left-width: 1px;
       }
       .pagination .wp-pagenavi .current {
       	color: #999999;
       	background-color: #f5f5f5;
       }
       ```
   
 * and here is the code
 *     ```
       <?php if(function_exists('wp_pagenavi')) { wp_pagenavi('<nav class="pagination visible-lg">', '</nav>'); } ?>
       ```
   
 *  to be placed in your theme
 *  Thread Starter [stardrive](https://wordpress.org/support/users/stardrive/)
 * (@stardrive)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/custom-navigation-7/#post-6512008)
 * Thank you so much.
    I quite understand and I greatly appreciate your providing
   the CSS and the Code
 * Regards,
 * Stardrive
 *  Thread Starter [stardrive](https://wordpress.org/support/users/stardrive/)
 * (@stardrive)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/custom-navigation-7/#post-6512014)
 * Sorry, please.
 * Please, in which file in my theme should I place the code:
    <?php if(function_exists(‘
   wp_pagenavi’)) { wp_pagenavi(‘<nav class=”pagination visible-lg”>’, ‘</nav>’);}?
   >
 *  Plugin Author [Lester Chan](https://wordpress.org/support/users/gamerz/)
 * (@gamerz)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/custom-navigation-7/#post-6512017)
 * Contact your theme author. I place it on index.php, archive.php in my theme. 
   But it is different for every theme.
 *  Thread Starter [stardrive](https://wordpress.org/support/users/stardrive/)
 * (@stardrive)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/custom-navigation-7/#post-6512020)
 * Thank you. I am OK now.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Custom Navigation’ is closed to new replies.

 * ![](https://ps.w.org/wp-pagenavi/assets/icon.svg?rev=977997)
 * [WP-PageNavi](https://wordpress.org/plugins/wp-pagenavi/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-pagenavi/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-pagenavi/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-pagenavi/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-pagenavi/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-pagenavi/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [stardrive](https://wordpress.org/support/users/stardrive/)
 * Last activity: [10 years, 8 months ago](https://wordpress.org/support/topic/custom-navigation-7/#post-6512020)
 * Status: resolved