mobile menu on iPad

Unite Theme
1

Hi there,

I hope you can help me out, I would like to see the mobile menu on an iPad.
I found this thread: https://colorlibsupport.com/t/how-to-adjust-menu-and-font-for-mobile/#post-16558
But I do not seem to get it to work… Can you please take a look at www.aapjeskooi.nl/webenfoto?

Thank you!!!

Monique van Helden

2

Hi Monique,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

@media (max-width: 1024px) {
.navbar-toggle {
    display: block;
    float: right;
}
.navbar-header {
    float: none;
}
.navbar-collapse.collapse {
    display: none!important;
}

.navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Best Regards,
Movin

3

Thank you Movin,

I tried exactly that code, but it didin’t work… (You can see it here: http://www.aapjeskooi.nl/webenfoto/)
Btw, it’s the Unite theme, but I think that doesn’t matter.

Can you please take a look and tell me what I do wrong?

Monique

4

Hi Monique,

I can see on your site that you have added the following CSS code in the style.css file of your theme but as you can see it’s not the same code which i have shared above.

Please use the above exact code and after using it test it by clearing your browser cache.

@media (max-width: 1024px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Regards,
Movin

5

Movin, you are the Best!!! Thank you!!!

6

You are most welcome here :slight_smile: