Responsive mobile navigation

Hi,

im am having trouble with my navigation in mobile.

in my phone Xiaomi i see the hamburger navigation but in some iphones they do not.

how do i make my site more responsive for mobile?

http://www.motherschoice.club/

Hi Ariel,

One quick win you can employ is to use different Bars for different devices on your header. Let me explain.

When creating headers, the top-most level container, similar to a “section” on the page builder is called a Bar.

By looking at the source code on your website, I see that you’re using just one Bar on the header. In my opinion, that makes managing the responsiveness of a header a difficult task. What I would suggests is to use one bar for Desktop and another one for Mobile. You can even add a Tablet bar if you need one.

You can Hide or Show entire bars depending on screen sizes rather than doing the hiding/showing in both the Containers and Elements.

While doing this will not make your header responsive, it’ll set the stage for you to work more easily.

Now to answer your main question, here are other tips I’ll suggest based on what I see on the site:

  1. Make use of the Max Width for the containers
  2. I see a lot of negative margins in the elements. It looks like they can be avoided

That’s all. Tell us how it goes. Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.