The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Split two menus that roll into one in responsive view?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #167449

    I am trying to find a menu that can let me have two menus but when it is in 768px and under it gets pushed into one offside menu.

    Because I am after a top bar that has users links in and then the bottom bar has main menu

    <topbar users links>
    <mainmenu main links


    Design image(s) would be useful or your current reduced case HTML/CSS in a example.

    Let us help you…review the links in the “Tips” box on the right.

    What is an “offside” menu…do you mean one that is off the page to start and then slides in?


    Do you want to combine the menus into one or just display them differently.?

    Until we know how this is supposed to look at both versions it’s hard to help.

    The simplest thing is for JQuery to copy the ‘second’ menu links to the bottom of the first menu and then delete the second menu.

    That, however seems like overkill.


    Depending on the layout (and required HTML structure) this could be achieved with position: absolute and some careful sizing/positioning. Alternatively (though I wouldn’t recommend it) you could duplicate the secondary nav code and place it next to the main nav but hidden until you trigger the media query.


    I would create the two menus you want on a desktop and set that up properly how you want it. Then use media queries to hide them both under your 768px width threshold you mentioned above.

    Then create a third menu which has all the menu links from the other two, and use media queries to show it in the placement you want after the screen width has dropped below your 768px width threshold.

    This is quite easy if you are using a CMS to build the site since you can then just create menu item alias’ for the extra menu links. that way if one is changed or updated, it automatically changes the one using it as an alias.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.