So far I tested the following css to modify the linktree in mobile view for screen below 50em. Those who aimed at smaller screen of 33.75 or below may use @media screen and (max-width: 33.75em) instead.
@media screen and (max-width: 50em) {
ul.navigate_section li:not(:first-child):not(:last-child) a {
overflow: visible;
}
.linktree, .linktree:after {
float: none;
display: block;
padding: 0;
border: none;
box-shadow: none;
}
.linktree:not(:first-child) {
margin: 1em 0 0;
}
.linktree:first-child a {
height: 2em;
padding: 0 2px;
}
.linktree, .linktree:last-child, .linktree:last-child a, .linktree:last-child>spa, .linktree:nth-child {
width: 100%;
max-width: 100%;
}
.linktree:nth-child(2):before {
content: "\00a0 \00a0 -> \00a0";
float: left;
}
.linktree:nth-child(3):before {
content: "\00a0 \00a0 ---> \00a0";
float: left;
}
.linktree:nth-child(4):before {
content: "\00a0 \00a0 -----> \00a0";
float: left;
}
.linktree:nth-child(5):before {
content: "\00a0 \00a0 -------> \00a0";
float: left;
}
}
I am not so sure whether we need addon for this but do feel free to contribute more ideas for this in here.