how to make both the top bar & main bar responsive in one mobile menu?

The problem that I have is with website responsiveness on mobile.

Note that I'm using WordPress & Elementor to build this.

A client asked me to provide a header menu as a top bar & main bar, Bluehost is a good example of what I'm trying to achieve:

  1. Desktop version: https://i.stack.imgur.com/RRSHz.png
  2. Mobile version: https://i.stack.imgur.com/8QKO4.png

In Elementor, both the top bar & main bar were interpreted as separate nav menus, therefore, on Desktop it was fine, but on mobile there were two hamburger buttons. I'm not sure how can I make both bars shrink in one mobile menu like on Bluehost, can anyone help?

Here are screenshots of my scenario:

  1. Desktop version: https://i.stack.imgur.com/37sSJ.png
  2. Mobile version: https://i.stack.imgur.com/oxfEY.png

1 answer

  • answered 2021-06-18 17:49 bhanu

    Okay it should be easy.

    On Desktop

    Make two menu

    • top bar
    • main bar

    Top bar contains all the stuff which is shown in the desktop image. Main bar contains all the stuff which are there in image + the item on the top bar. Add CSS to hide them on desktop.

    on Mobile

    Make top bar hidden. Turn main bar to hamburger, turn on the display for the items which are from top bar.

    You can also reverse the scenario and have all item on top with hidden main items and show them when on mobile.