In some rare cases, you might encounter an issue where the screenshots of your Desktop site Hotjar takes has elements from the mobile site, such as the navigation menu. This could also be the other way round, like Desktop elements on the mobile screenshot.
The reason why the screenshot was taken is incorrect is because, in your CSS, either the Desktop site is not set to be shown starting at 1280px or some elements are probably hidden/shown using @media queries similar to these:
@media (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS RULES IN HERE */
}min-device-width and max-device-width are not recognized by all browsers. To fix the problem, you need to replace them with min-width and max-width.
@media (min-width: 768px) and (max-width: 1024px) {
/* CSS RULES IN HERE */
}The difference between the two can be found in this article:
http://www.menucool.com/3613/max-device-width-vs-max-width-Which-one-should-I-use
Solution: It is best using min-width and max-width for all media queries since it achieves what you want on a broader range of browsers/scenarios, especially on a desktop.
Once this change is done by your web developer, you will need to start a new Heatmap snapshot for Hotjar to take a new screenshot of the page.