MyBB Community Forums

Full Version: How difficult to truncate with css blur each section in <navigation>?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
(Sorry, "CSS fade", not "CSS blur")
Okay, I have found the solution for me. May help someone else. That 2 or 3 lines of navigation can get ugly in mobile.

.navbit {
max-width:25%;overflow:hidden;white-space:nowrap;
}
.navfade {
   -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
}

theme templates > navigation > nav_bit

<a class="navbit" href="{$navbit['url']}"><div class="navfade">{$navbit['name']}</div></a>&nbsp<i class="fas fa-angle-double-right"></i>