Beaver Themer: Styling the Post Navigation Module


 
Beaver Builder Post Navigation

Notes:

The Post Navigation Module was added to Beaver Themer 1.2 which was released at the end of August 2018.

Those who use the Beaver Builder Theme will recognize it as something built in to the theme.  It can be hidden or made visible via the customizer by going to: Customizing ▸ Content▸Post Layout ▸Prev/Next Post Links.

What’s nice about the Post Navigation Module is:

  1.  It easily allows us limit post navigation to one category or custom taxonomy.  (For example,  I remember needing this on a golf club website where we only wanted visitors to navigate to posts on the next or previous hole.)
  2.   We have more control over the content output. (For example we could just have arrows showing)
  3.   With a bit of CSS and column settings it is perhap easier to add some extra styling options (For example adding directional icons and and setting link and hover colour from the page builder.
  4.  For developers there is also new filter added fl_theme_builder_post_nav
  5.  Field connectors shortcode appear to work in the next and previous too (no idea if that is useful!)

Here, I am sharing the HTML and CSS I added to this site. I plan to use this as a resource for other projects.

My HTML:

Placed in the next and previous text boxes of the Post Navigation module

<span><i class="fas fa-angle-double-left"></i> %title </span>
<span> %title <i class="fas fa-angle-double-right"></i></span>
and the one use here:
<span> <h4><i class="fas fa-angle-double-left"></i> PREVIOUS </h4> %title</span>
<span><h4>NEXT <i class="fas fa-angle-double-right"></i> </h4>%title </span>

My CSS:

 

/*-------------------------------------------------------------

I added the CSS class selector of dw-post-nav to the advance tab 
of the Post Navigation module.

-----------------------------*/ 


/* One pixel jump to be the same as other BB buttons */ 


.dw-post-nav .post-navigation .nav-links A SPAN:active
{
	position: relative;
	top: 1px;
}

/* We need to add a span to the nav links to isolate our anchor text.*/ 

.dw-post-nav .post-navigation .nav-links A SPAN 
{
	padding: 12px 20px;
    display: inline-block;
    font-size: 14px;
        
}

/* Above is fine for styling "next" and "previous" the same, but is
added ".nav-next" and "".nav-previous". */

.dw-post-nav .post-navigation .nav-links .nav-previous A SPAN
{
background-color: #f9c82c;
color:#ffffff;
text-decoration: none;
}

.dw-post-nav .post-navigation .nav-links .nav-next A SPAN
{
    background-color: #000000;
    color: #FFFFFF;
    text-decoration: none;

}


/* Here is the hover for "next and previous"

*/
.dw-post-nav .post-navigation .nav-links .nav-previous A SPAN:hover
{
background-color: #f4c52e;
}

.dw-post-nav .post-navigation .nav-links .nav-next A SPAN:hover
{
background-color: #222;
}

/* This centers the nav links for mobiles, but I have made the row invisible on this site

*/

@media (max-width: 768px)
{
.dw-post-nav .post-navigation
{
margin: auto;
width: 50%;
}
}


Beaver Themer Post Navigation

Links:

https://kb.wpbeaverbuilder.com/article/448-themer-singular-layout-post-navigation-module

david-waumsley-web-developer-150x150-circle

David Waumsley

A British chap who helps with websites and whatnot.  Some refer to him as a digital nomad, but he will accepts the term "fugitive" or "international bag lady".  He actually builds websites for a living. Yeah, I know!

6 Comments

  1. Carsten Thode on February 14, 2019 at 6:31 pm

    Hi David – I was wondering how to control the order of posts showing up. Even when you use the tags (as in your golf example, will the next/prev go from hole 1 to hole 2 to hole 3, etc or just jump about to the order in which the posts were input? That seems to be what the documentation says on the bb site. I am trying to use this with PODS, but it seems to be jumping all over instead of me being able to specify an order in which they display.
    Hope that makes sense! Thanks!

    • David Waumsley on March 2, 2019 at 2:30 pm

      Oh heck, so sorry Carsten. I completely missed this. Makes perfect sense, but you got me! I am wondering what affect this plugin will have:

      https://wordpress.org/plugins/post-types-order/

      We used this a lot, but I am not sure how it would work in this case. Is it not possible to change the publish dates and adjust that way?

  2. KC Clark on May 9, 2019 at 5:48 pm

    Hi David, how do I get the post navs to align (eft and right) on mobile. They are currently aligning in the middle. See screenshot here – https://cl.ly/c7ce871c5ec1

    • David Waumsley on May 17, 2019 at 7:58 pm

      Hi KC,

      If you replace the CSS that is set the centre the links on mobiles with this is should work. (Presently it is on this site) .

      @media (max-width: 768px)
      {

      .fl-module-fl-post-navigation .nav-links .nav-previous
      {
      width: 50%;
      float: left;
      }
      .fl-module-fl-post-navigation .nav-links .nav-next
      {
      width: 50%;
      float: right;
      }
      }

  3. KC Clark on May 23, 2019 at 7:28 pm

    Hi David, I tried the above code, but it didnt work… heres the link to view hte results https://cl.ly/c7ce871c5ec1

    • David Waumsley on May 24, 2019 at 6:36 am

      Hi KC

      It’s hard to say without seeing where your CSS is, but to forces this adding !important may work so you could try this or send a link to your site,

      @media (max-width: 768px)
      {

      .fl-module-fl-post-navigation .nav-links .nav-previous
      {
      width: 50% !important;
      float: left !important;
      }
      .fl-module-fl-post-navigation .nav-links .nav-next
      {
      width: 50% !important;
      float: right !important;
      }
      }

Leave a Comment





Do NOT follow this link or you will be banned from the site!