I love that I can see how the mobile user will see the site when I am creating it. However, I would love the option to be able to change the view on something based on if they are viewing it from mobile without having to create separate blocks that only mobile viewers can see. So if I have a page that looks great on desktop, I want to be able to have a setting that says for this page if the user is mobile view it this way. And be able to set the whole page to it. Currently my menu goes so far across the page even in mobile viewing that a lot of my users can’t see the menu or log in button, and some blocks have to be scrolled across to be able to see any information. How can I make this a better mobile experience?
Hi you could add a custom bottom bar like here:
Please put your browser on mobile size so you can see it.
Floating menu => https://test-play.softr.app/design-menu-copy
Bottom bar => https://test-play.softr.app/mobile-bottom-bar
Then add a scroll to or redirect to page to each of the menu items
1 Like
Can you please include a link how you achieved this amazing floating menu?
Exactly what I’ve been looking for! Would love to know how you achieved both of these.
1 Like
Checking back on this! How to achieve?
Hey,
The code for the floating menu:
<div class="menu">
<div class="toggle">
<ion-icon name="add-outline"></ion-icon>
</div>
<li style="--i:0;">
<a href="#">
<ion-icon name="home-outline"></ion-icon>
</a>
</li>
<li style="--i:1;">
<a href="#">
<ion-icon name="person-outline"></ion-icon>
</a>
</li>
<li style="--i:2;">
<a href="#">
<ion-icon name="settings-outline"></ion-icon>
</a>
</li>
<li style="--i:3;">
<a href="#">
<ion-icon name="mail-outline"></ion-icon>
</a>
</li>
<li style="--i:4;">
<a href="#">
<ion-icon name="mail-outline"></ion-icon>
</a>
</li>
</div>
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
<style>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.menu {
position: fixed;
bottom: -50px;
right: 0;
width: 205px;
height: 205px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.menu .toggle {
position: absolute;
width: 60px;
height: 60px;
background: #000000;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
font-size: 2em;
transition: transform 1.25s;
}
.menu li {
position: absolute;
left: 0;
list-style: none;
transform-origin: 100px;
transform: rotate(0deg) translateX(60px);
transition: 0.5s;
transition-delay: calc(0.1s * var(--i));
display: none;
}
.menu li a {
background: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
transition: 0.5s;
transform: rotate(calc(360deg / -8 * var(--i)));
}
.menu :hover {
color: #FFA500;
}
.menu li a:hover {
background-color: black;
color: white;
}
.menu.active .toggle {
transform: rotate(315deg);
color: #FFFFFF;
}
.menu.active li {
transform: rotate(calc(360deg / 8 * var(--i)));
display: block;
}
@media (min-width: 769px) {
.menu {
display: none;
}
}
</style>
<script>
let toggle = document.querySelector(".toggle");
let menu = document.querySelector(".menu");
let menuItems = document.querySelectorAll(".menu li");
menuItems.forEach((item) => {
item.style.display = "none";
});
toggle.onclick = function () {
menu.classList.toggle("active");
menuItems.forEach((item) => {
item.style.display = menu.classList.contains("active") ? "block" : "none";
});
};
</script>
Here is the code for the mobile bottom bar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="new.css" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bangers&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
</head>
<body>
<div class="bar">
<a href="https://example.com" class="material-symbols-rounded-link">
<label class="label">
<i class="material-symbols-rounded">favorite</i>
</label>
</a>
<a href="https://example.com" class="material-symbols-rounded-link">
<label class="label">
<i class="material-symbols-rounded">share</i>
</label>
</a>
<a href="https://example.com" class="material-symbols-rounded-link">
<label class="label">
<i class="material-symbols-rounded">bookmark</i>
</label>
</a>
</div>
</body>
</html>
<style>
.bar {
position: fixed;
left: 0;
right: 0;
bottom: 0px;
background-color: white;
padding-top: 0.5rem;
padding-left: 0.8rem;
padding-right: 0.8rem;
border-top: 1px solid #f53b2f;
border-left: none;
border-right: none;
border-bottom: none;
box-shadow: 0px 15px 25px -10px rgba(255, 255, 255, 0.25);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.label {
display: flex;
position: relative;
width: 3.6rem;
height: 1.92rem;
justify-content: center;
align-items: center;
cursor: pointer;
color: black;
z-index: 2;
border-radius: 0.8rem;
transition: 100ms;
}
.label:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
transform-origin: center;
background-color: black;
transform: scaleY(0%) scaleX(0%);
border-radius: 1rem;
z-index: 1;
transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.label:hover {
color: white;
transition: 100ms;
}
.label:hover:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: black;
z-index: 1;
box-shadow: 1px;
transform-origin: center;
transform: scaleY(100%) scaleX(100%);
transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-radius: 0 0 1rem 1rem;
}
.label a {
color: inherit;
text-decoration: none;
}
.label:hover i {
color: #f53b2f;
}
.label a.material-symbols-rounded-link {
display: inline-block;
width: 100%;
height: 100%;
}
.label:hover i.material-symbols-rounded {
color: red;
z-index: 999;
}
@media (min-width: 769px) {
.bar {
display: none;
}
}
</style>
1 Like