-3
In the browser of Safari / or Chrome in the iPhone mobile version, appears a rolling bar on top of the menu, there is a way to resolve this when iPhone?
SCSS:
@mixin getSideRadius($side:'normal', $radius:0) {
@if ($side != 'normal') {
border-#{$side}-radius:$radius;
-webkit-border-#{$side}-radius:$radius;
-moz-border-#{$side}-radius:$radius;
-ms-border-#{$side}-radius:$radius;
} @else {
border-radius:$radius;
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-ms-border-radius:$radius;
}
}
@mixin getMenu() {
$black5: #595a5c;
$black4: #86878b;
$black2: #dee1e6;
$black1: #f3f6fd;
$black_bg: #f9fbff;
$id_green: #96dd48;
$size_mobile:768px;
$white:#fff;
$spacing_12:12px;
$size_mobile_small:480px;
$size_mobile_medium:580px;
$size_desktop_small:800px;
//MENU PRINCIPAL
.menu-dropdown-base {
position: fixed;
bottom: 0;
background: $white;
height: 48px;
display: flex;
left: 0;
right: 0;
width: 100%;
z-index: 23;
justify-content:center;
align-items: center;
margin: 0 auto;
border-top: 1px solid $black2;
}
.menu-dropdown-base ul.nav-menu-principal {
display: flex;
-webkit-display: flex;
flex-direction: row;
flex-wrap: wrap;
display: flex;
justify-content: space-around;
}
.menu-dropdown-base ul.nav-menu-principal li {
margin: 5px 0.51px;
padding: 0 4.2px;
text-align: center;
}
.menu-dropdown-base ul.nav-menu-principal li {
margin: 0 4px;
padding: 0 4px;
text-align: center;
}
@media(min-width:400px) {
.menu-dropdown-base ul.nav-menu-principal li {
margin: 0 2vw;
padding: 0 4px;
text-align: center;
}
}
@media(min-width:440px) {
.menu-dropdown-base ul.nav-menu-principal li {
margin: 0 4vw;
padding: 0 4px;
text-align: center;
}
}
.menu-dropdown-base ul.nav-menu-principal li a {
display: block;
padding: 2px;
width: 100%;
}
.menu-dropdown-base ul.nav-menu-principal li a > span {
font-weight: 600;
color: $black5;
font-size: 10px;
line-height: 12.8px;
display: flex;
padding-top: 2px;
}
.menu-dropdown-base ul.nav-menu-principal li.active a span,
.menu-dropdown-base ul.nav-menu-principal li.active a i {
color: $id_green;
}
.menu-dropdown-base ul.nav-menu-principal li a i {
font-size: 17px;
color: $black5;
padding: 1px;
}
.menu-dropdown-base ul.nav-menu-principal {
display:flex;
flex-wrap: wrap;
}
.menu-dropdown-base ul.nav-menu-principal li.menu-notificacoes,
.menu-dropdown-base ul.nav-menu-principal li.menu-mais,
.menu-dropdown-base ul.nav-menu-principal li.menu-explorar {
display: flex;
position: relative;
}
.menu-account-user ul.drop-user-menu li.message-item-menu > a,
.menu-dropdown-base ul.nav-menu-principal li.menu-producao-textual,
.menu-dropdown-base ul.nav-menu-principal li.menu-painel-educador,
.menu-dropdown-base ul.nav-menu-principal li.menu-favoritos,
.menu-dropdown-base ul.nav-menu-principal li.menu-tarefas {
display: none;
}
.footer-content .menu-footer ul {
display: flex;
}
.footer-content .menu-footer ul li {
margin: 0 10px;
}
.footer-content .footer-menu-position {
display: flex;
flex-direction: row-reverse;
}
.footer-content .menu-footer ul li > a {
display: inline-flex;
border: 1px $black2 solid;
@include getSideRadius('normal', 10px);
padding: $spacing_12;
color: $black4;
font-size: 16px;
line-height: 16px;
&:hover {
background: $black_bg;
}
}
@media(min-width:$size_mobile_small) {
.menu-dropdown-base ul.nav-menu-principal li {
margin: 0 4.5vw;
padding: 0 4px;
text-align: center;
}
}
@media(min-width:$size_mobile_medium) {
.menu-dropdown-base ul.nav-menu-principal li {
margin: 0 5vw;
padding: 0 4px;
text-align: center;
}
}
@media(min-width:600px) {
.menu-dropdown-base ul.nav-menu-principal li {
margin: 0 5vw;
padding: 0 4px;
text-align: center;
}
}
@media(min-width: $size_mobile) {
.menu-dropdown-base ul.nav-menu-principal {
margin-left: 16px;
}
.menu-dropdown-base ul.nav-menu-principal li {
margin: 0;
padding: 0;
text-align: center;
}
}
@media(max-width: $size_desktop_small) and (min-width:$size_mobile) {
.menu-dropdown-base ul.nav-menu-principal li {
margin: -1.1vw;
padding: 0 10px;
text-align: center;
}
}
@media(min-width:$size_mobile) {
//saindo do mobile...
.menu-dropdown-base ul.nav-menu-principal li a:hover {
background: $black1;
}
.menu-dropdown-base ul.nav-menu-principal li.active a span,
.menu-dropdown-base ul.nav-menu-principal li.active a i {
color: $id_green;
}
.menu-dropdown-base ul.nav-menu-principal li a {
@include getSideRadius('normal', 10px);
padding: 10px 15px;
}
.menu-dropdown-base {
border-top: none;
bottom: inherit;
top: 60px;
border-bottom: 1px solid $black2;
justify-content:left;
z-index: 11;
}
.menu-dropdown-base ul.nav-menu-principal li a {
display: flex
}
.menu-dropdown-base ul.nav-menu-principal li a span {
font-size: 12.8px;
line-height: 12.8px;
margin-left: 8px;
margin-top: 2px;
}
.menu-dropdown-base ul.nav-menu-principal li.menu-notificacoes,
.menu-dropdown-base ul.nav-menu-principal li.menu-mais,
.menu-dropdown-base ul.nav-menu-principal li.menu-explorar {
display: none;
}
.menu-account-user ul.drop-user-menu li.message-item-menu > a,
.menu-dropdown-base ul.nav-menu-principal li.menu-producao-textual,
.menu-dropdown-base ul.nav-menu-principal li.menu-painel-educador,
.menu-dropdown-base ul.nav-menu-principal li.menu-favoritos,
.menu-dropdown-base ul.nav-menu-principal li.menu-tarefas {
display: flex;
}
}
}
@include getMenu();
HTML from the menu:
<div class="menu-dropdown-base">
<div id="menubar" class="menu-list">
<ul class="nav-menu-principal">
<li class="menu-home active" style=""><a href="#"><i class="combo icon-home"></i><span>Início</span></a></li>
<li class="menu-favoritos"><a href="#"><i class="combo icon-favorite"></i><span>Favoritos</span></a></li>
<li class="menu-tarefas"><a href="#"><i class="combo icon-clipboard-content"></i><span>Tarefas</span></a></li>
<li class="menu-producao-textual"><a href="#"><i class="combo icon-pencil-paintbrush"></i><span>Produções</span></a></li>
<li class="menu-conquistas"><a href="#"><i class="combo icon-medal"></i><span>Conquistas</span></a></li>
<li class="menu-explorar"><a href="#"><i class="combo icon-keypad"></i><span>Explorar</span></a></li>
<li class="menu-notificacoes"><a href="#"><i class="combo icon-school-bell"></i><span>Notificações</span></a></li>
<li class="menu-mais"><a href="#"><i class="combo icon-menu"></i><span>Mais</span></a </li>
<li class="menu-painel-educador ng-scope"><a href="#"><i class="combo icon-graduation-cap"></i><span>Painel do Educador</span></a></li>
</ul>
</div>
</div>
Basic example in codePen, The only reason you don’t have the icons is because you don’t need them... What I want to know is if there is any way to adjust if it is only on the iPhone... I know there is a way to identify the notch, but I do not know to recognize iphone.
I’m looking for a solution that can be in CSS or Javascript.
