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

Home Forums JavaScript Responsive Menu – CSS or JS?

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

    I’m not sure if this is a CSS or JS solution.

    Wondering if someone could guide me in the right direction re a responsive menu I’m modifying for a website. I figure a demo is the best way to explain and it’s here:

    When collapsed to mobile size it shows only a gray menu box which clicked on reveals the menu. What I’d like is that display to be the same case at full size. In other words, instead of the horizontal bar with the categories I want there just to be that gray box so when clicked it shows the vertical menu of mobile size (of course, at larger I would make the menu a bit wider). I thought that replacing some of the regular CSS with what was in the media-query would do it but the results have been squirrelly. :D

    I hope I’ve explained this right.


    So you want a menu “button” that shows a dropdown menu?

    If so, there’s a billion of those in both CSS and JS to choose from.

    What have you tried so far? Set up a CodePen so we can help.


    shaneisme, thank you for the reply.

    Here is the Code pen for it:

    At it’s most basic, I want the display that is seen in mobile size to be seen at desktop/any size. Obviously I’m going to want it a little wider at desktop size than the 300px or so of a mobile screen so that would be a mere width alteration to around 60-70% of screen area with a max-width of around 600px.

    The reason I don’t want the long bar is both because of space taken and the accordion effect. A straight-vertical display suits me fine at any size.

    Yes, I’ve checked out menus till it seems I was coming down with menu-itis. But this version is the one that if I or someone can figure out how to do would be the best and simplest thus far without relying much on other ‘code-ware’.


    You want to remove all the JS that looks at window size and make it inline-block by default.

    Obviously it will take some cleaning up :)

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