Skip to main content ↑ ↓
Linktree In Mobile View Started by ahrasis · · Read 4178 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Linktree In Mobile View

I can't find the topic where somebody is asking to change the look of linktree in mobile view as I am now interested to look into it.

If I remember correctly, the suggestion is to make it something like this format:

Home
-| First
--| Second
---|Third
----| Fourth

I think this could be done by hiding default linktree and showing mobile linktree in mobile view.

I will also attempt to create this addon (with other addons), soon.

Re: Linktree In Mobile View

Reply #1 –

Honestly, I would remove the linktree entirely (at least one of the two).
To obtain something like the one you describe, you can just use some css: display:block; width:100% and then adjust the padding with nth-child(1/2/3/4/etc) (you set for example 4em on .linktree, and then nth-child(1) 0.75em, nth-child(2) 2em, nth-child(3) 3em, and you can stop there IMO).
And finally:
Code: [Select]
.linktree:before {
    content: "-|";
    float: left;
}
.linktree:nth-child(3):before {
    content: "-----|";
    margin-left: -2.25em;
}
.linktree:nth-child(2):before {
    content: "--|";
    margin-left: -1.25em;
}
It may require some adjustment, but should work. :)
Bugs creator.
Features destroyer.
Template killer.

Re: Linktree In Mobile View

Reply #2 –

Google likes linktree / breadcrumbs.

Re: Linktree In Mobile View

Reply #3 –

Reference?
Bugs creator.
Features destroyer.
Template killer.

Re: Linktree In Mobile View

Reply #4 –

I do not have the link right now. I think it was under the guidelines for a website to be mobile friendly.

Re: Linktree In Mobile View

Reply #5 –

Quote from: emanuele – Honestly, I would remove the linktree entirely (at least one of the two).
To obtain something like the one you describe, you can just use some css: display:block; width:100% and then adjust the padding with nth-child(1/2/3/4/etc) (you set for example 4em on .linktree, and then nth-child(1) 0.75em, nth-child(2) 2em, nth-child(3) 3em, and you can stop there IMO).
And finally:
Code: [Select]
.linktree:before {
    content: "-|";
    float: left;
}
.linktree:nth-child(3):before {
    content: "-----|";
    margin-left: -2.25em;
}
.linktree:nth-child(2):before {
    content: "--|";
    margin-left: -1.25em;
}
It may require some adjustment, but should work. :)
I will test this and update later.

Re: Linktree In Mobile View

Reply #6 –

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.

Code: [Select]
@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.