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.
Bottom bar => 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?
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
Thank you so much @matthieu_chateau
I used it for my horse trading marketplace, see here
How can I add text below the icons?
Hi Paul,
This would be the structure to have what you want:
<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>
<span class="icon-text">Favorite</span>
</label>
</a>
<a href="https://example.com" class="material-symbols-rounded-link">
<label class="label">
<i class="material-symbols-rounded">share</i>
<span class="icon-text">Share</span>
</label>
</a>
<a href="https://example.com" class="material-symbols-rounded-link">
<label class="label">
<i class="material-symbols-rounded">bookmark</i>
<span class="icon-text">Bookmark</span>
</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;
flex-direction: column;
position: relative;
width: 3.6rem;
height: 3.6rem;
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: white;
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;
}
.icon-text {
font-size: 0.75rem;
color: black;
margin-top: 0.2rem;
}
.label:hover .icon-text {
color: black;
z-index: 999;
}
@media (min-width: 769px) {
.bar {
display: none;
}
}
</style>
Thank you so much @matthieu_chateau!!!
Hiya! I dont think this code is working anymore. Do you have an updated one?
All codes related to the mobile bottom bar must be inside the footer custom code.
The floating menu version doesn’t work anymore indeed => removed from the thread.
I will create a guide with a cleaned version of the mobile bottom bar.