Skip to Content

Mobile menu adjustments

Video

If you open the video on YouTube, you can find the chapters of the different settings in the description.

Adjusting mobile menu

To adjust mobile menu, go to Theme options -> Minimalio options -> Mobile menu. These options are only available with the Premium Minimalio plugin.

Breaking point

Breaking point is the width of the display, when the mobile menu appears, instead of the normal menu. This is very useful, if you have a very long menu, that would break the header on smaller screens. Try changing the size of your browser and set it accordingly. You can also use this, if you want to use the mobile menu even on desktops. To do that, set the breaking point to 4096 minimum.

Mobile menu style

Choose between Right side mobile menu and Full width menu. The difference is only visible on bigger screens.

Mobile menu logo

In Theme options -> Site Identity, you can set up three diferent logos, that than could be used in the mobile menu.

Mobile menu colors

You can choose the Icon bars color, so that is the color of the icon when the menu is closed. When it’s open, there is a color of the top, the body, the closing button and the font color.

Mobile menu font

You can also choose the size of the mobile menu font, it’s style and it’s letter spacing.

Transcript of the video

Hi there today, I’d like to talk to you about the mobile menu and how to set it up.So again, these options are only with the premium plugin and we’ll go through all the options that you can use. So here in the Minimalio options, you got a mobile menu down here.

The first one is the breaking point. The breaking point is the width of the display when the mobile menu shows up. It’s really nice to have this ability to change this number, because for example right now I got a really long menu and when I change the width of the browser, you can see now it’s fin, but then I got a problem and then I get to the 768 and the mobile menu shows up. So if you have a long menu you want to push this number up and that it will show up the mobile menu on bigger displays, Now this option is also very useful in case you wanna always have the mobile menu. So I would just put like really big number here like e.g. 4,000 pixels, publish it and now the mobile menu will show everywhere. Now this is quite modern, some people really like it I find it a little annoying because it means that every time you want to go into menu, it takes you another click. On the other hand, it looks cool. No doubt about that.

Now you have two options for the mobile menu the default is the right side. So that means it will open like this on the right side. Then you have another option which is full width and that means it will open over the whole website like that

Next thing is the icon bars color. So that gives you the option of changing this color So let’s just put I don’t know green there. And you see it’s green.

Next thing is mobile menu logo. So in the site identity, you have options of setting up up to three logos. I’ve set it up as a normal logo, so it’s right here and publish it and then in Mobile menu I can choose it. So that’s a general logo and now it will show up here in the mobile menu as well

Now we have four options for the colors. So let’s maybe use the right side to see it now. I’ll just choose some random colors to see. Okay, close button color white body background Whatever and font color white. And now you see those colors, so this is the top background, body background colors of closing button and the font color

Next one you can change the size of the font. So let’s put like something big there. You can do italic and you can also make like bigger letter spacing there. All right, so let’s check it out.
So you see the size is bigger. It’s italic and there’s a bit of letter spacing All right, that’s it. Thanks