Search code examples
htmlcsswordpressvisual-composer

Pseudo ::after works for some divs, but won't on VC Hero Section header

I'm working on a site for a client who wants borders (they are PNG images) on the bottom of their headers and a few other divs throughout the site. So far I have a CSS class .hh-border-bottom with a pseudo ::after selector that I used for the divs in the body of the site that works great when I put the class on the row!

However, that class refuses to work anywhere for the header. I've tried putting it on the section, row, and column to no avail. I'm using Visual Composer for the site, so my header image is the Hero Section element, which does not have an input for class names.

I've even tried making a new class for the headers (.hh-border-header) since their border image is different than the body divs, but that doesn't work either (don't know why I thought it would).

Any ideas? And if I need to clarify anything, let me know.

This is what the current divs look like with the bottom border, as well as what the headers need to look like.

image1

CSS:

.hh-border-header{
  position: relative;
  z-index: 2;
  min-width: 100%;
  min-height: 100%;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
}

.hh-border-header::after {
  height: 177px;
  width: 100%;
  z-index: -1;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  background-position: center;
  bottom: -3px;
  content:" ";
  display: block;
  position: absolute;
}

What my VC looks like from the back-end (only the header)

image2

EDIT:

Pete gave me another idea to try. Makes sense why the ::after might not work on a Hero element, so I changed it so that my header image is a background image on the row, then put text and some empty space inside the row like:

and this is what my HTML looks like (Note: I grabbed this from my Page Source since I'm working with Visual Composer; it's a little wonky I think)

<div id="page-content" class="header-style-default page-with-vc">

<div class="page-holder page-layout-fullwidth">

<section id="header" class="vc_section vc_custom_1494884324924 vc_section-has-fill">
  <div data-vc-full-width="true" data-vc-full-width-init="false" 
  data-vc-stretch-content="true" 
  class="vc_row wpb_row vc_row-fluid header hh-border-header vc_custom_1494949886936 
  vc_row-has-fill vc_row-no-padding">

  <div class="hh-border-header wpb_column vc_column_container 
  vc_col-sm-12 vc_col-has-fill">

  <div class="vc_column-inner vc_custom_1494950070267">

    <div class="wpb_wrapper">

      <div class="vc_empty_space" style="height: 250px" >

        <span class="vc_empty_space_inner">
        </span>
      </div>

<div class="wpb_text_column wpb_content_element  ">
  <div class="wpb_wrapper">
    <h1 style="text-align: center;">Overnight Camps</h1>

  </div>
</div>
<div class="vc_empty_space  hh-border-header"   style="height: 250px" >
  <span class="vc_empty_space_inner"></span>
</div>
</div>
</div>
</div></div>
<div class="vc_row-full-width"></div>
</section>

Solution

  • Works for me when I use background colors. Make sure your background-image url's are correct

    .hh-border-header {
  display: block;
  position: relative;
  z-index: 2;
  height: 500px;
  width: 500px;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
  background-color: green;
}

.hh-border-header::after {
  height: 177px;
  width: 100%;
  z-index: 5;
  background-image: url(http://dev.mywebsite.com/wp-content/uploads/2017/05/WWA_header_waves.png);
  background-color: red;
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  background-position: center;
  bottom: -3px;
  content: " ";
  display: block;
  position: absolute;
}
    <div id="page-content" class="header-style-default page-with-vc">

  <div class="page-holder page-layout-fullwidth">

    <section id="header" class="vc_section vc_custom_1494884324924 vc_section-has-fill">
      <div data-vc-full-width="true" data-vc-full-width-init="false" data-vc-stretch-content="true" class="vc_row wpb_row vc_row-fluid header hh-border-header vc_custom_1494949886936 
  vc_row-has-fill vc_row-no-padding">

        <div class="hh-border-header wpb_column vc_column_container 
  vc_col-sm-12 vc_col-has-fill">

          <div class="vc_column-inner vc_custom_1494950070267">

            <div class="wpb_wrapper">

              <div class="vc_empty_space" style="height: 250px">

                <span class="vc_empty_space_inner">
        </span>
              </div>

              <div class="wpb_text_column wpb_content_element  ">
                <div class="wpb_wrapper">
                  <h1 style="text-align: center;">Overnight Camps</h1>

                </div>
              </div>
              <div class="vc_empty_space  hh-border-header" style="height: 250px">
                <span class="vc_empty_space_inner"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="vc_row-full-width"></div>
    </section>