Hamburger menu on mobile

[thoughtsociety]

Hi Support,
I am using the custom header feature to attain a nice desktop look for the site (see images) but when I go to my iPhone-6+, it looks bad.

Can you advise the best method for getting both the mobile and desktop site to look good?
I read the article about becoming familiar with Flex and the Template (design cloud) suggestion but this is turning out to be a whole heck of a lot of work just to do something that should be out of the box simpler.

I remember before I ever started using the custom header feature of Pro, I had no issues in earlier sites getting the whole thing responsive, automagically using X.

[rad]

Hi @thoughtsociety,

Thanks for reaching out.

What you created is just a header bar for desktop, you will need to create another header bar just for mobile and utilize this option

Your header bar meant for desktop should be hidden from mobile, and header meant for mobile should be hidden from desktop. You can also switch to different device view while you’re working on it like this

And with the header bar for mobile, you can re-arrange it differently and use any collapse menu element instead of the inline menu which meant for desktop.

Thanks!

[thoughtsociety]

How does one hide one of the menus?

[thai]

Hi There,

As @Rad mentioned in the previous reply. You should be able to hide a menu by clicking on the Customize tab then select the screen size that you want to hide that menu:

Hope it helps

[thoughtsociety]

Did you name your ‘menu, top links, dropdown, sublinks’ because I don’t see those.
Menu is not an item in header customizer.

[ruenel]

Hello @thoughtsociety,

The menu should be an element in your custom header. Just click the menu. If it is not clickable, please provide us the url of your site so that we can check it.

Thanks.

[thoughtsociety]

Maybe I should jus tell you what I am trying to do.
Trying to get two separate headers,
1 for desktop which is anything over 1920x1080 usually.
1 for mobile which in my case is an iPhone 6+ which is 1080x1920 (w,h).
So, there is very little I can do to get the hamburger to show up on my iPhone which is what I am trying to do.
I have screen simulator as well which allows me to set chrome to different resolutions for testing.
The top bar in my ‘mobile’ header never shows up either with the logo image and the nav, search, tagline etc.
When the width of the browser drops below 1200, i lose all the headers.
Can you help?

[ruenel]

Hello @thoughtsociety,

Your headers could be hidden away in screens smaller than 1200. Did you use the “Hide During Breakpoints” in your bar settings? Please edit your custom header in the header builder and check each of your bar settings. You can find it in “Customize” section of your bar settings.

Hope this helps. Kindly let us know.

[thoughtsociety]

I did find the customize section of each element but the problem is choosing the right resolution icon. Not clear which one will designate the right device resolution for mobile correctly. Kinda trial and error thing.

[nabeel]

Hi again,

Here is a link that you can refer to https://mediag.com/blog/popular-screen-resolutions-designing-for-all/ to see the resolutions of multiple mobile devices, see the viewport column of the tables.

Hope this helps!

[thoughtsociety]

hmm, that could clear some things up.
I will let you know how it goes.

Cheers

[thoughtsociety]

Where is menu?

- ThoughtSociety

[nabeel]

Hi again,

Did you mean the navigation menu? Upon inspecting your site, it seems like your menu is in Bar 2 > Container 2. Click on Bar 2 first then in Containers section, click on Container 2 to find your menu in the Elements sections.

Hope this helps!

[thoughtsociety]

Yes, and here is how I have it set.
This is the desktop header.

You can see that everything is excluded except the largest screen size.

I think I am getting the hang of it.
Thanks

[ruenel]

Hello @thoughtsociety,

Your current menu element is only visible in large screens. You will need to insert navigation collapsed or navigation drop down element as well and make this element visible to the smaller screens.

Hope this helps.