Arrow Disappearing When Plugin Used With Heading

  • Resolved Jake Madden

    (@jake-madden)


    8 years, 4 months ago

    Ok, I’ve been successfully using this super handy plugin for a little while now, and I’m just having a problem with displaying the default arrow in combination with some of my other css formatting. I’m trying to make expandable h1 headings, and they work just fine but the arrow isn’t being displayed on the side. I checked the site css and it’s definitely there in the background image, but it’s being covered by the code I have for my h1 tag. Or is it possibly a conflict with background-color? Is there any way to make them both display properly, with the arrow on top?

    .entry-content h1 {
  color: #f0f0f0;
  background-color: #404040;
  position: relative;
  /* for child pseudo-element */
  z-index: 0;
  margin: 0 -600rem;
  /* add back negative margin value */
  padding: 0.25rem 600rem;
  overflow: hidden;
  opacity: 0.7 !important;
  line-height: 200%;
}

    I’ve tried changing the z-index for .collapseomatic in my custom css, but to no avail. Apart from that, I haven’t edited the css for this plugin in any way. I’m still relatively new to editing css and html, so I really just fiddle until I solve things but I’m a little stumped on this!

    You can view the page here: LINK

    I could just leave it without the arrows, but I feel people won’t realise they can expand the headings!

    Any help would be greatly appreciated!

    https://wordpress.org/plugins/jquery-collapse-o-matic/

Viewing 1 replies (of 1 total)
  • Plugin Author Baden

    (@baden03)

    8 years, 4 months ago

    the issue is due to the fact you are setting the left & right margin and padding of your h1 element like so:

    .entry-content h1 {
    margin: 0 -600rem;
    padding: 0.25rem 600rem;
}

    So the arrows are not ‘Disappearing’ but rather are moved -600rem to the left, waaaaay off the page. What you might want to do instead, is wrap the entire list of expand elements in a div, and give this the background you desire.

    Let us know if we can be of further assistance, or if this issue is resolved for you.

Viewing 1 replies (of 1 total)
  • The topic ‘Arrow Disappearing When Plugin Used With Heading’ is closed to new replies.

Tags