Navigation like on mobile

Hi sweetdreams16,

Hope you’re well ??

Can you try applying this CSS code and see if that works for you?

@media all and (max-width: 1024px) and (min-width: 768px) {
    .navbar-collapse.collapse {
        display: none !important;
        height: 0 !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .navbar-toggle {
        display: block;
        position: relative;
        float: right;
        padding: 9px 10px;
        margin-top: 28px;
        margin-right: 15px;
        margin-bottom: 28px;
    }
    .navbar-header {
        float: right;
    }
}

If your theme doesn’t have custom CSS field, then you may wish to use a child theme or a plugin like this one for this additional CSS. That way you’re protected when you come to upgrade.

Cheers,
Predrag

i did this Predrag, and it seems to be fine, but when i click on the menu it shows up for about half second and dissapears. Here is the link so you can check it if you can.

https://probica.byethost7.com/

Hi @sweetdreams16

Please go to Admin Dashboard >> Appearance >> Customize >> Theme Options >> Theme General Options.

Now copy below css code and paste into custom css editor.

@media all and (max-width: 1024px) and (min-width: 768px) {
    .navbar-collapse.collapse {
        display: none !important;
        height: 0 !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .navbar-toggle {
        display: block;
        position: relative;
        float: right;
        padding: 9px 10px;
        margin-top: 28px;
        margin-right: 15px;
        margin-bottom: 28px;
    }
    .navbar-header {
        float: right;
    }
}
@media (min-width: 768px) and (max-width: 1024px)  {

.navigation_menu .menu-menu-1-container {
    margin-top: 70px;
    width: 100%;
}
.navigation_menu .navbar-nav li {
    display: block;
    width: 100%;
}
.navigation_menu  .navbar-nav{
float:none !important;
}
.navigation_menu .dropdown-menu{
position:relative !important;
width:100% !important;
left:0 !important;
}
.navigation_menu  i {
        margin-right: 10px;
    background-color: #fff;
    padding: 0 5px;
    color: #000;
}
.navbar-collapse.in {
    display:block !important;
}
}

Save the changes.

Thanks.

Thanks a lot man !

Most Welcome.

Thanks.