[SOLVED] Ion-footer ion-toolbar transparent aka border top drive me crazy


Anyone knows how to how to implement an ion-footer / ion-toolbar transparent?


I tried to set background-color=transparent, border=0, no-shadow etc. on each elements but I always end up, at list with ion-footer class=“footer footer-md”, with a displayed border at the top of the footer…what do I miss?

Freak got it…sometimes you search for hours, then you post a topic and you find your solution 5 minutes later :wink:

So for the record, the footer-md style add a background-image before the style. So the solution:

ion-footer {
    &.footer-md::before {
        background-image: none;

There’s an easier way :slight_smile: use the transparent attribute.

A la

    <ion-toolbar transparent>

Should do it.


Hi @keldar89,

For some reason the “transparent” does not work with Galaxy S5 (Chrome dev tools). Only iphones

Yes adding below in the scss

.scroll-content {
    margin-bottom: 0!important;

along with

<ion-footer text-center no-border transparent>

in the HTLM will do :smiley:


While the transparency is achieved, I noticed that the scrolling stopped working. Have you encountered the same issue?