CODEWITHSUNDEEP
htmlcss
jsmitter3
jsmitter3

Reputation: 443

CSS - Add padding only if another div is visible

I have the following html..

.wrapper {
  background:wheat;
}

.woocommerce-store-notice, p.demo_store {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    font-size: 1em;
    padding: 1em 0;
    text-align: center;
    background-color: #a46497;
    color: #fff;
    z-index: 99998;
    box-shadow: 0 1px 1em rgba(0,0,0,.2);
}
<div class="wrapper">
This is my content
</div>
<p class="woocommerce-store-notice demo_store" style="display: block;">DEMO NOTICE CLICK HERE <a href="#" class="woocommerce-store-notice__dismiss-link">Dismiss</a></p>

The notice is covering up my content, I know I can add some padding to fix this but how can I add it so that the padding only applies if the .woocommerce-store-notice is visible?

Upvotes: 1

Views: 1976

Answers (2)

gabrielchl
gabrielchl

Reputation: 606

You may solve it using 1 line of jQuery.

In the code, $(".woocommerce-store-notice").outerHeight() gets the height of the notice and applies the value to margin-top of .wrapper

$(".wrapper").css({"margin-top":$(".woocommerce-store-notice").outerHeight()})
.wrapper {
    background:wheat;
}

.woocommerce-store-notice, p.demo_store {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    font-size: 1em;
    padding: 1em 0;
    text-align: center;
    background-color: #a46497;
    color: #fff;
    z-index: 99998;
    box-shadow: 0 1px 1em rgba(0,0,0,.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="woocommerce-store-notice demo_store" style="display: block;">DEMO NOTICE CLICK HERE <a href="#" class="woocommerce-store-notice__dismiss-link">Dismiss</a></p>
<div class="wrapper">
This is my content
</div>

Upvotes: 1

Dan Kreiger
Dan Kreiger

Reputation: 5516

If you can't change the html markup, you can use flex to change the order of your selectors i.e. .woocommerce-store-notice, p.demo_store would be order: 0; and .wrapper would be order: 1; This way you don't have to depend on absolute positioning to make sure the notice appears at the top of your page.

Try the snippet below.

// dismiss the notice by clicking the "Dismiss" link"

document.querySelector('.woocommerce-store-notice__dismiss-link').addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelector('.woocommerce-store-notice').style.display = 'none';
});
* {
  margin: 0;
}

.flex {
  display: flex;
  flex-direction: column;
}

.wrapper {
  background: wheat;
  order: 1;
}

.woocommerce-store-notice,
p.demo_store {
  order: 0;
  font-size: 1em;
  padding: 1em 0;
  text-align: center;
  background-color: #a46497;
  color: #fff;
  box-shadow: 0 1px 1em rgba(0, 0, 0, .2);
}
<div class="flex">
  <div class="wrapper">
    This is my content
  </div>
  <p class="woocommerce-store-notice demo_store">DEMO NOTICE CLICK HERE <a href="#" class="woocommerce-store-notice__dismiss-link">Dismiss</a></p>
</div>

Upvotes: 0

Related Questions