navigation not working correctly
- This topic has 13 replies, 2 voices, and was last updated 3 years, 3 months ago by
rk.
-
AuthorPosts
-
March 6, 2020 at 4:06 pm #25512
rk
ParticipantHello,
I have a problems to menu PC and mobile hamburger menu:i maked screens:
https://we.tl/t-f9C1O6O32FMarch 6, 2020 at 4:09 pm #25513rk
ParticipantMy Customizing ▸ General
Additional CSS
__________________________________________________________________________________________________________________
@media only screen and (max-width: 992px){
.header_transparent header.header_v2 .sticky-header:not(.sticky-header-shrink) {
position: relative!important;
}
}
/*Mobile menu on theRight side*/
@media (max-width:992px) {
.sticky-header.sticky-header-shrink {
position: fixed!important;
}
nav.mobile-menu {
position: fixed!important;
width: 100%;
top: 80px!important;
height: 210px;
overflow: auto;
z-index:9999;
}
}
@media (max-width:480px) {
#agama-logo a {
max-width: 80%!important;
text-align: left!important;
}
.logo{
float: left!important;
}
.mobile-menu-icons{
width: 20%!important;
clear: none!important;
text-align: right!important;
}
}
/*sticky footer*/
html, body, #main-wrapper {
height: 100%!important;
}
#colophon{
position:fixed !important;
bottom:0;
width: 100%;
z-index: 99999!important;
}#content{
margin-bottom:50px!important;
}
__________________________________________________________________________________________________________________March 6, 2020 at 7:01 pm #25520Zex
ModeratorHi, rk!
2. If you want to increase the visibility of the mobile menu list, you need to increase the height value in the existing code you already have inserted earlier.
https://prnt.sc/rco8wqRegards
March 6, 2020 at 7:08 pm #25521rk
Participantfirst cod:
There are 5 errors which must be fixed before you can save.
Update anyway, even though it might break your site?March 6, 2020 at 7:40 pm #25522Zex
ModeratorCan you attach a screenshot of the custom CSS menu?
March 6, 2020 at 7:46 pm #25524rk
Participanthere is a screenshot:
https://we.tl/t-M5RcLLiGF7March 6, 2020 at 8:08 pm #25526Zex
ModeratorOk , I see…
Try this code instead:
@media only screen and (max-width: 1400px) { .sticky-nav ul.sub-menu:not(.sub-sub-menu) { max-height:65vh!important; overflow: auto; } .sticky-nav>li>ul>li>ul, .sticky-nav>ul>li>ul>li>ul{ position:relative!important; left:25px!important; width:200px!important; } }
Regards
March 6, 2020 at 8:44 pm #25527rk
ParticipantI tried, it’s not good how the menu works for me.
March 6, 2020 at 8:52 pm #25528rk
ParticipantPreviously, the submenu fly on the right side, it was good, but the problem was that the submenu didn’t interfere with the screen on small displays.
It is necessary that the submenu fly out on the left side, and then it will fit on small displays.March 6, 2020 at 10:15 pm #25532rk
Participantso I drew an example, is it possible to do this:
March 9, 2020 at 10:31 am #25611Zex
ModeratorHello, rk!
Sorry for the late reply, we are don’t work on the weekend.
In that case, try to use the following codes instead:
@media only screen and (max-width: 1400px) { .sub-sub-menu{ position:absolute!important; left:-100%!important; } .sticky-nav>li>ul.sub-menu>li:hover { border-right-width: 3px; border-right-style: solid; border-right-color: #c30202!important; border-left-color: transparent!important; } .sticky-nav>li>ul>li.menu-item-has-children>a:before { font-family: FontAwesome; left: -10px; position: relative; content: "\f104"; bottom: 0px; } .sticky-nav>li>ul>li.menu-item-has-children>a::after{ content:""!important; } }
Regards
March 10, 2020 at 3:19 pm #25671rk
ParticipantHello,
the menu is already working fine, but need to do, make the title one line:
https://we.tl/t-vTFlNbbyuARegards
March 10, 2020 at 3:39 pm #25679Zex
ModeratorHi, rk!
Try to insert the following code additionally:
.sticky-nav ul.sub-menu, .sticky-nav ul.sub-sub-menu{ width: auto; white-space: nowrap; }
Regards
March 10, 2020 at 3:48 pm #25680rk
Participantexcellent, everything is already working well.
thank you very much !Regards
-
AuthorPosts
- You must be logged in to reply to this topic.