Thanks a lot for your very interesting feed back
I have changed it this way if it can help someone
Code:
@media (max-width: 575.98px) {
.cb_template .cbMenuNavBar .cbMenuNavBarToggle,
.cb_template .cbTabsMenu .cbTabsMenuNavBarToggle {
display: none;
}
.cb_template .cbTabsMenuNavBar {
padding-left:5px;
padding-right:5px;
}
.cb_template .xl-small {
font-size: 60%;
}
.cb_template .cbMenuNavBar .cbMenuNav::-webkit-scrollbar,
.cb_template .cbTabsMenu .cbTabsNav::-webkit-scrollbar {
height: 3px;
background-color: #F5F5F5; }
}
.cb_template .cbMenuNavBar .cbMenuNav::-webkit-scrollbar-track,
.cb_template .cbTabsMenu .cbTabsNav::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #ddd;
border-radius: 10px; }
.cb_template .cbMenuNavBar .cbMenuNav::-webkit-scrollbar-thumb,
.cb_template .cbTabsMenu .cbTabsNav::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color:#673ab7; }
}
.cb_template .cbMenuNavBar .collapse {
display: block;
}
.cb_template .cbTabsMenu .collapse {
display: flex;
width: 100%;
}
.cb_template .cbMenuNavBar .cbMenuNav,
.cb_template .cbTabsMenu .cbTabsNav {
overflow: auto;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
}
.cb_template .cbMenuNavBar .cbMenu,
.cb_template .cbTabsMenu .cbTabNav {
white-space: nowrap;
}
.cb_template .cbMenuNavBar .nav-link,
.cb_template .cbTabsMenu .cbTabNavLink {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.cb_template .cbTabsMenu .cbTabNavMore .cbTabNavMenuMoreBtn {
display: block !important;
}
}
With these example overrides :
Code:
'_UE_WEB_GEST' => '<i class="fal fa-inline fa-lg fa-fw fa-cog mr-1 ml-2"></i><span class="d-none d-xl-inline">Configuration</span><span class="d-block d-xl-none font-weight-lighter mr-1 ml-2 x-small">Configuration</span>',
'_UE_BLOG_WRITE' => '<i class="d-sm-block d-xl-inline fal fa-inline fa-lg fa-fw fa-edit mr-1 ml-2"></i><span class="d-none d-xl-inline">Articles</span><span class="d-block d-xl-none font-weight-lighter mr-1 ml-2 x-small float-left pt-sm-2">Articles</span>',
looking like this on small screens :
krileon
