How to have burger menu icon on desktop screen

[iamwithU]

Hi wonderful people,
I read your forum pages but couldn’t find any tips on this. It’s about the burger menu icon. I think it Is called a ‘mobile button’ in your theme options.
I like this mobile button to be seen on the bigger port views, ie I don’t want the menu items expanded for the desktop and laptop screens. I’d like the customer to click on the burger menu and let the menu items cascade vertically. Can guide me on this?

Also, how do I center the menu items (I think you call it ‘links’) and style them? (font color, background color eg) when they drop down?

Look forward to learning from you guys.

[tristup]

Hi @iamwithU,

Thanks for reaching out.
If you want to show the Burger menu on the desktop, you need to create the Header using the Header Builder and add the following elements.

1. Navigation Layered
2. Navigation Dropdown
3. Navigation Modal
4. Navigation ollapsed

I would also suggest you go through the following documentation on how to create the header and set up the navigations.

Header Builder Overview | Themeco Docs

How to Set up Navigation | Themeco Docs

Regarding the question center the menu items, and style them, we are not very clear on this. Can you please explain it a bit more?

Thanks

[iamwithU]

thank you @tristup for the quick turn-around. Appreciate the detailed steps. What if I already have this burger menu showing on the mobile screens. Since it is already set up, can I extend it to the bigger screens? Or do I have to create the Header from scratch as in your steps? Right now, my menu items or links are opened up and visible on the bigger screen. Please see 1st screenshot.

@tristup

Regarding the question center the menu items , and style them, we are not very clear on this. Can you please explain it a bit more?

What I meant was after the burger menu is clicked, the menu items appear, but are now flushed to the left edge. (Kindly see screenshot). I like to center these links on the center of the page. Also I like the font and background to be a different color.

[tristup]

Hi @iamwithU,

You are using the Default header which does not have that option to show the Burger menu on the bigger screen. If you create the Header using the Header Builder and add any of the element that shows the Burger menu you don’t need to create anything else for the mobile. Please remember that the customized header overrides the default header. Regarding the Menu Items you need to add the following custom CSS code to center it.

.x-nav
{
    text-align: center !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Thanks

[iamwithU]

Dear @tristup, very grateful for the guidance.
I am following your steps to create the Burger menu. But I got stuck:
If you see the documentation, we’re supposed to go to the Header under Pro. But if you look at my screenshot, my Header is not there.

So far, I have given a new header name, assigned condition group, set up a Menu, but just couldn’t move on to the Navigation step. Would appreciate your kind direction.

[tristup]

Hi @iamwithU,

The screenshot in the documentation was taken from the older version, and now all the options are available under the Cornerstone menu. I have checked your header and found that you have not added the Bar or Container into it. And also found that the permission for the elements is not given and that is why most of the elements are not available in the Builder.

I checked and enable the permission for the elements required for the header and added the Navigation Modal into the Header for your example.

Hope it helps.
Thanks

[iamwithU]

Thanks a billion, @tristup!
Just for my learning purpose so next time I go check myself: where is the “permissions” page that you have been referring to?
Appreciate your effort.

[tristup]

Hi @iamwithU,

You can find the permissions under the Cornerstone > Settings as shown in the given screenshot. You need to click the update button after you modify the permission.

Hope it helps.
Thanks

[iamwithU]

Awesome @tristup. Thanks for your great tips!

[tristup]

Hi @iamwithU,

Glad that we are able to help you.

Thanks