How do responsive websites display hamburger menus only on mobile browsers but not on desktop browsers?

Answer 1

It depends on the implementation the UI engineer decides to use. One way to achieve such behavior is with only CSS by using media queries. With media queries you can create specific rules to be applied based on the device screen size or current browser window size. To clarify, with responsive design you don't necessarily care if it is a mobile, tablet, or desktop, but instead you focus on the screen size, and that is what media queries are meant for. eg:

// Default rule to hide the menu on large devices

.menu { display: none: }

// Rules for extra small devices

@media (max-width: 375px) {

.menu { display: block; }

}