Responsive theme nav menu problem
Permalink Browser Info Environment
Hello Dewebmakers team,
thank you so much for this great theme, to begin with!
I wish to ask of your help in this single point that I'd also posted on the c5 forum a short while earlier.
to know whether the below described problem was caused by my own custom styling, I checked by reinstalling the theme whether it recurred with the original style files, and when it did, I decided to write to you.
there seems to be a problem with the display of navigation menu -and, in relation to that, of any page- while switching from a screen that has width<768px to one that has width larger than this breakpoint.
when the menu is changed from sidebar nav (say, desktop view) to mobile drop-down top nav bar (say, mobile view),
the first problem is that it is always shown 'dropped-down' by default (pic1). on the already smaller mobile screens this covers up the logo and the upper part of the site text, and one has to click on the menu to manually close it each time (pic2).
then, when I thus close the menu and return to large screen -which I do by resizing the browser or using developer tools/online screentests- my sidebar nav menu is shown as moved further up the page, disappeared under the logo bar - and basically the whole page gets moved up, causing the topmost parts becoming off-monitor (pic3). only when I refresh the page everything is shown properly again (pic4).
there is clearly a relation between the dropped-down state (on small screen) and how the sidebar's showing upon returning to large screen:
if I return to large screen from the small screen while the top nav menu is dropped-down (as in pic1) instead of closed, the sidebar nav appears correctly (as in pic4).
If I return to small screen from large screen while the sidebar is shown improperly as described above (as in pic3), the drop-down menu is shown closed as a top bar (as in pic2).
The problem affects the view i.e. when the screen is rotated (as far as I could see by using online screen test services) or the browser is resized.
might you please help me fix this?
many thanks again,
kind regards
thank you so much for this great theme, to begin with!
I wish to ask of your help in this single point that I'd also posted on the c5 forum a short while earlier.
to know whether the below described problem was caused by my own custom styling, I checked by reinstalling the theme whether it recurred with the original style files, and when it did, I decided to write to you.
there seems to be a problem with the display of navigation menu -and, in relation to that, of any page- while switching from a screen that has width<768px to one that has width larger than this breakpoint.
when the menu is changed from sidebar nav (say, desktop view) to mobile drop-down top nav bar (say, mobile view),
the first problem is that it is always shown 'dropped-down' by default (pic1). on the already smaller mobile screens this covers up the logo and the upper part of the site text, and one has to click on the menu to manually close it each time (pic2).
then, when I thus close the menu and return to large screen -which I do by resizing the browser or using developer tools/online screentests- my sidebar nav menu is shown as moved further up the page, disappeared under the logo bar - and basically the whole page gets moved up, causing the topmost parts becoming off-monitor (pic3). only when I refresh the page everything is shown properly again (pic4).
there is clearly a relation between the dropped-down state (on small screen) and how the sidebar's showing upon returning to large screen:
if I return to large screen from the small screen while the top nav menu is dropped-down (as in pic1) instead of closed, the sidebar nav appears correctly (as in pic4).
If I return to small screen from large screen while the sidebar is shown improperly as described above (as in pic3), the drop-down menu is shown closed as a top bar (as in pic2).
The problem affects the view i.e. when the screen is rotated (as far as I could see by using online screen test services) or the browser is resized.
might you please help me fix this?
many thanks again,
kind regards
| Type: | |
|---|---|
| Status: | Resolved |
Dear Jaap,
even if the occurence of the problem were limited to resizing the browser, a website owner would not want (laptop and desktop) users to have to refresh the page every time they needed to resize the browser. or do you think this is not a problem or 'bad practice', when it will span all the non-tablet devices that have width>768px (practically all laptops and desktops)?
and I'd mentioned in my first post that the problem happened not only when browser is resized, but when the screen was rotated, too, which thus affects tablets and handhelds. I checked the latter via online screen test services (like the 'screenfly' on quirktools.com) for responsiveness of websites, and not on a real tablet or handheld device. but I think the referred service's results are reliable.
Regards,
even if the occurence of the problem were limited to resizing the browser, a website owner would not want (laptop and desktop) users to have to refresh the page every time they needed to resize the browser. or do you think this is not a problem or 'bad practice', when it will span all the non-tablet devices that have width>768px (practically all laptops and desktops)?
and I'd mentioned in my first post that the problem happened not only when browser is resized, but when the screen was rotated, too, which thus affects tablets and handhelds. I checked the latter via online screen test services (like the 'screenfly' on quirktools.com) for responsiveness of websites, and not on a real tablet or handheld device. but I think the referred service's results are reliable.
Regards,
should I still expect a solution?
Thanks for your message.
Does this problem occur only when resizing your browser window?
If that is the case, a simple page refresh is the solution.
Browsers do not have a scalable screen on mobile devices and thus will never have this problem. Only for developers this could be an issue.
Testing the mobile version of this free theme by resizing your browser without refreshing is a bad practice.
With kind regards,
Jaap