petri71 wrote:
if I want to change it for mobile only I guess I can use a @media class, can't I ?
Yes. Keep in mind, "mobile" is a bit diffuse, should it include tablets (relatively large screens)? I assume you should simply target smaller screens.
petri71 wrote:As for the size if the menu I understand it's something important on a mobile phone, but, as you can see in the prinstscreen below, there are way smaller buttons you should be using everyday that are almost half the size, so I personally I don't think that reducing the size of the button of 25% would be so bad.
http://www.coquille.org/x3/content/index/IMG_2795.PNG
Not a problem. I think the "recommended rule" is to have buttons minimum 42px for touch devices, and the one in X3 is 56px. The main reason it's big in X3, is because I wanted to make it super obvious by default.
petri71 wrote:Anyway I would like to try a few things :
Pretty simple to customize it.
.sb-toggle>button {
font-size: 12px; /* make the button 42px */
}
I would be a bit careful with opacity, since the color of the menu button are already soft, toned to match the skin. You could instead change colors, for example use soft white for the hamburger-icon, and make the background almost entirely transparent.
.sb-toggle>button {
font-size: 12px; /* make the button 42px */
opacity: .5; /* looks a bit dull */
}
Mobile-only, target screen size, for example:
@media (max-width: 1024px) {
.sb-toggle>button {
font-size: 12px; /* make the button 42px */
opacity: .5; /* looks a bit dull */
}
}