Previous & Next Block – Hide background color

  • hebhansen

    (@hebhansen)


    4 weeks ago

    Hi WP

    I have styled the previous & next block content in css with some background-color and padding and box-shadow to make it button’ish. The txt links hide when there is none. Fx new site with only one post or the very first or very last post. My new styling does not hide though. How can accomplish this?

    My approach is a custom class I can add in block > settings > advanced, so that I can opt in and out of this styling on the fly.

    Here is the css so far:

    /********** Previous & Next Buttons ************/
    .button-previous-and-next {
        background-color: #636363; /* Theme dark grey */
    	padding: 10px 20px;
    	border-radius: 5px;
    	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    }

    .button-previous-and-next a {
    	text-decoration: none;
    }

    span.post-navigation-link__label {
    	display: none;
    }

    .button-previous-and-next:hover {
        background-color: #A4A4A4; /* Theme light grey */
    	box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    }

    Question is how to hide when empty?

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

  • You can use a :empty selector

    .button-previous-and-next:empty {

    display: none;

    }

    Thread Starter hebhansen

    (@hebhansen)

    Thx …. Beautiful and working.

    Also I am trying to get those to 100% width on mobile… How?

    @media screen and (max-width: 780px) {
    	.button-previous-and-next a {
    		width: 100% !important;
    	}
    }

    Does not work. Without a does not work either.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.