Setup a Desktop Menu
A question I constantly get asked is how to make the menu look like the one on this website. Specifically, people usually wonder about how they can use the plugin to control both the desktop menu and the mobile menu and include both inside the header bar.
It’s actually quite a simple process but let’s go through it step by step together to help you understand it in all it’s complexity.
Step One – Turn on the Header Bar option
The first step is a simple one, all you need to do is navigate to the Header Bar tab from the plugin options and ensure that the Enabled option is turned on under the Initial Setup header.
If you want the header bar to appear on all devices and screen widths then you can do as I have done and set the breakpoint to something huge (I have done a million pixels).
Step Two – Turn on the Desktop Menu option and style accordingly
Next, you need to navigate to the Desktop Menu tab and make sure that this has been turned on.
There are a number of style options on this tab that you can apply including font sizing, colours, menu item heights etc. so go wild and enjoy.
Step Three – Set the point at which the main menu becomes a mobile menu
Now we need to define the breakpoint at which the main menu turns into a mobile hamburger menu. There is no rule here for this as it will be different for every website and as such you will need to play around with this until the breakpoint width matches the point at which your desktop menu becomes too large for the screen width.
The option can be found under the Initial Setup tab and on this site, it’s set at 1600px wide.
Step Four – Fix the menu inside the header
The last step involves getting the desktop menu to fit inside our header bar.
The trick here is to match the Positioning option under the General Setup header of the Desktop Menu tab with the positioning of our Positioning option in the Header Bar section. For example, if the header bar has positioning set to absolute then we need to set our desktop menu positioning option to the same, similarly if it is set to fixed then we need fixed for the desktop menu too.
On this website I have a fixed header bar and as such need the desktop menu to be fixed also. I also need my menu to be set to show on the right hand side of the header bar, so I set the Side option accordingly. I also don’t need a fixed width for the menu so I have left it blank so it takes an automatic width.