How to use mobiscroll hamburger menu popup without the hamburger icon?

Page layout & navigation
1

I’m looking at this example: JQuery and JQuery Mobile Navigation Hamburger menu Example | Mobiscroll

And I love the menu that pops up and I want to use it but the problem is that mobiscroll applies a dark color to the hamburger menu style and I need mine to be white. I looked at overriding it with the following: .mbsc-mobiscroll .mbsc-ms .mbsc-ms-item{color:white} but that causes problems for my tab controls (and likely other things).

The reason I need the hamburger icon to be white is because I’m using it on a dark background. For that same reason I also don’t want the entire box around it to be highlighted when I hover over it, but only the icon itself.

In other words, assuming there’s no easy way to achieve the effect I’m looking for with mobiscroll’s hamburger icon, I’d like to be able to use and style my own hamburger icon but use the mobiscroll popup that goes with it. Can I do this?

Here’s a screenshot of what I’m trying to accomplish.

hamburger

2

Hi @Vincent_Wansink,

In this case, you need to use custom CSS. For example:

.md-hamb .mbsc-ms .mbsc-ms-item {
    color: white;
}
.md-hamb .mbsc-no-touch .mbsc-ms-item:not(.mbsc-disabled):hover {
    background: none;
    color: #eee;
}
3

Thanks Elod but the problem with this solution is that it messes up my tab controls. No worries, I’ll do a custom solution.