X3Photo Gallery Forums

petri71 · 31 Mar 2023, 11:33

Hi,

When I chose the slidemenu and on any mobile version, the menu button is a hamburger style icon.

How can I customise it ?

I'd like to change the size of it and was wondering if I could change the size according to device screen size,

thank you in advance for your answer

31 Mar 2023, 23:09

Well, it can be customized by CSS. Changing the "hamburger" menu would be a bit complex, unless you just want to change it to another "font icon" included in Font awesome 4.7.
https://fontawesome.com/v4/icons/

petri71 wrote:I'd like to change the size of it and was wondering if I could change the size according to device screen size,

It can be done by changing font size and padding, but what's the plan exactly? You can't have size purely proportional with screen size. Besides, touch (mobile) devices normally require at least the same size button as desktop, so that clumsy fingers can easily click it ...

petri71 · 01 Apr 2023, 07:09

I don't want to change the icon, hamburger is just fine.

I just think it's too big, I understand your point for the finger on the mobile device though.

So I made my logo bigger on desktop and now the slidemenu icon does not look that big any more (i just realised I could open it with my spacebar ! Blowed my mind !!)

I still would like to try to customise the one on mobile...

you're talking about font size ? is there a setting for the menu font size or will it change everything ?
maybe the padding ?

What about the background color ? Could I touch the opacity ? I won't have to change the size but the hamburger wouldn't be so "heavy" in the design. Problem with opacity it would change the color compared to the logo. So I'd like to try the size first

http://www.coquille.org/x3/content/index/IMG_2774.PNG

you can see here the menu is bigger than my logo :-)

01 Apr 2023, 10:28

You only want to change it on "mobile"? Small screens specifically then I assume? There are no "settings" for styling like this in X3, because it would be pointless to have 1000's of styles for what CSS essentially does.

You can do anything to the menu with some CSS, opacity size etc, but I need some clearer ideas before I can make any suggestions.

The idea behind the rather obvious menu on mobile, is that it's the single-most important UI element that the mobile-users should be able to see and click. Having it clear and obvious can't be bad, but feel free to change it.

petri71 · 02 Apr 2023, 12:11

if I want to change it for mobile only I guess I can use a @media class, can't I ?

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

Anyway I would like to try a few things :

1)
could you help me change the hamburger's size and background opacity in general ?

2)
change the size on mobile only.

thank you in advance for your answer

02 Apr 2023, 23:54

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 */
}
}

petri71 · 03 Apr 2023, 06:27

wow

thank you for all that, I'm going to test it all !!

CHEERS !

X3Photo Gallery Forums

how to customise hamburger menu on desktop and/or mobile view7 posts

how to customise hamburger menu on desktop and/or mobile view

Re: how to customise hamburger menu on desktop and/or mobile view

Re: how to customise hamburger menu on desktop and/or mobile view

Re: how to customise hamburger menu on desktop and/or mobile view

Re: how to customise hamburger menu on desktop and/or mobile view

Re: how to customise hamburger menu on desktop and/or mobile view

Re: how to customise hamburger menu on desktop and/or mobile view