Detect Mobile Browser

Hello,

The hamburger menu is always there it is just hidden at certain screen sizes.
you can get the hamburger menu effect on desktop browsers as well, just shrink the width of your browser window down and eventually you will see the hamburger.

i hope this helps,

Hi wpbees,

Thanks for the reply. I would like to only display the hamburger menu on mobile devices. If you were to use a 13″ laptop, I don’t want the hamburger, but with a 13″ tablet, I do.

Is there a way of only showing it on mobile devices?

Is a 13″ touch-screen convertible laptop a tablet or a laptop? A piece of code can’t answer that.

Do you consider only screen size? You’ve said yourself that you consider a 13″ tablet mobile but a 13″ laptop not.

Ok so what about input? One 13″ tablet might have a touch screen, and many 13″ laptops don’t, but some do. Are they tablets?

What about operating system? Well there’s Windows laptops and Windows tablets, so testing for that won’t tell you anything.

So what if you only want to show the hamburger menu for touch devices, regardless of size? Well how do you know if it’s a touch device? Browsers these days can tell you if the device supports touch, but I know from experience that this can be misleading, because a user could be using a touchscreen laptop with an external mouse, or plugged into an external non-touch monitor. Both cases where assuming the user is touching the screen would be wrong.

So you can see that there is no 100% reliable way to test for a ‘mobile device’. Your decision when to show a hamburger menu should be based on whether or not you have the space on the screen to display the menu without hiding it away. Not on what fuzzy ‘category’ of device they might be using.

• This reply was modified 6 years, 8 months ago by Jacob Peattie.

It’s because on a PC my hamburger drop-downs are only displaying when I hover my mouse over the parent. I can’t get a click event to toggle them. So I would like to make the hamburger only work on mobile devices where it stays toggled when touched.

I am attempting to use this script:

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

How would I make the hamburger only display if this is true?

Well how are you currently getting the hamburger menu to display?

Regardless, I want to reiterate that the code you have posted will not address any of the points I made. You will still end up with undesirable behaviour on some devices.

My suggestion would be to not use hover at all. I (and a growing number of sites, you might have noticed), have moved away from using hover for any sort of interactivity due to the unreliability of detecting whether or not a device is capable of hover and whether or not any specific interaction is a touch or a click.

When the device width is less than 60rem using CSS Media Queries.

I understand, it was a suggestion from my manager.

How would I do that?