0

I have a Joomla 3.9x website with a custom responsive menu. Each menu item in the top level has a pseudo ::before element displaying icons from a custom font. If the item is a menu separator, then the separator (enclosed in a span) is followed by a button which has its own ::after element displaying either + or - depending on whether the hidden menu is displayed or not. On Windows 10, iPad and Android, these button ::after elements are correctly lined up. On Amazon Fire (v8, 10th Gen) the symbols are too high. I have no idea if there's any way to inspect the page on Fire tablets. Here are a couple of screenshots and I'll give some of the html and css below them.

This is as on Windows 10:

Correct layout

This is Amazon Fire Tablet:

enter image description here

<ul class="menu-b">
    <li class="item-129 single divider deeper parent">
        <span class="separator icon-life-events">
         ::before
         Life Events
        </span>
        <button class="btn-level-1" type="button" aria-label="Life Events">
         ::after
        </button>
    </li>
</ul>

This is the CSS:

.menu-b {
  display: -webkit-flex;
  flex-direction: column;
  justify-content: normal;
  margin: 0 0 1rem;
  padding: 0;
  position: relative;
  top: 0;
  overflow-y: auto;
}
.li {
  display: block;
  position: relative;
  line-height: 1.5;
  border-top: 1px dotted darkgray;
  margin: 0;
  padding: 0.5rem 0 0;
}
.li span {
  color: darkgreen;
  display: inline-block;
  font-size: 1.1rem;
  padding: 1rem 0;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
[class*=" icon-"]::before {
  font-family: 'myfont';
  font-size: 1.5rem;
  position: relative;
  top: 0.35rem;
  left: -0.5rem;
  }
}
button {
  position: relative;
  background: transparent;
  border: none;
  display: inline-block;
  height: 2.5rem;
  margin-left: 0.5rem;
  outline: none;
  padding: 0.75rem 0 1rem;
  top: -0.25rem;
  width: 20px;
}
button::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0;
  content: "+";
  color: darkgreen;
  font-size: 1.35rem;
  transition: all .3s ease-out;
  position: absolute;
  left: 0;
  top: 0;
}

I have tried different heights, padding, margins on different elements but it just doesn't want to display as I want it on Amazon Fire.

Any suggestions gratefully received.

1 Answer 1

0

After more experimenting, I have fixed it.

I combined the span and button elements into one so the html now looks like this:

<ul class="menu-b">
    <li class="item-129 single divider deeper parent">
        <div class="separator btn-level-1 icon-life-events" type="button" aria-label="Life Events">
         ::before
         Life Events
     ::after
        </div>
    </li>
</ul>

I had to adjust the CSS, but the main CSS change is that the pseudo ::after element has the class position: relative; instead of position: absolute;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.