Coding isn't my strongest point, noticed on mobile devices and zooming on browsers that the main nav bar disappears.
http://kizzme.co.uk/index.html
Any help appreciated!
Kizz
in your CSS you are hiding the navbar on mobile with out showing a mobile nav ,
to show the nav any way add
#nav {display: block !important;}
to the end of this file http://kizzme.co.uk/css/lessframework.css
or if you want to make a mobile navbar
check this http://navnav.co/
Related
For screen max-width: 479.98px menu has width: 100%; and body has class .lock {overflow: hidden;}. When menu is collapsed, class .lock is removed. It works well when I test it on small screen simulator on my PC, but on mobile I found a bug: if top bar of mobile browser is visible, there is no following the menu link, while menu collapses as it should, and I see the anchor at the url. But if browser top bar is hidden, everything works fine! And there is no problem for wider screens, with no overflow: hidden for body.
Tob bar visible, no links following. screen 1
Tob bar hidden, no problem. screen 2
Code: https://github.com/randominical/transys_demonstration
Demonstration: https://randominical.github.io/transys_demonstration/ To see the problem open it on mobile not bigger then 479px!
UPD: I'm nor sure anymore that the point is about the screen width. First of all, please test if you see the bug on your device.
I have implemented the material UI Drawer as per the responsive example on Material UI's website. On larger screens, how do I get the drawer to scroll with the whole page? At the moment, if the contents of the drawer become too long, a vertical scroll bar appears on the drawer itself which I o KY want to happen on smaller devices.
Here is a link to the code on Material UI's site:
https://material-ui.com/components/drawers/#responsive-drawer
I have tried overflow: hidden but obviously the contents then cut off and hide the content!
Any help would be much appreciated.
Many thanks
I guess it's because you specify height in your styles... Remove it or make it auto. It's a long shot, you should provide your css :)
i have a long signup form designed in angular-material. i have used toast to make UI more interactive. toast is working perfectly with its positioning too. but my html page is not fixed to its height, the toast appears to its position in the initial state of the page. but when i scroll down the page the toast is hidden, and i have to scroll up to see the toast. how to fixed the page height or any other way to present toast like a modal.any suggestion would be highly appreciated.
Try this style:
md-toast {
position: fixed !important;
}
I am using a nav walker to enable drop down menus using bootstrap in Wordpress, and it all works fine. What I am trying to figure out is there a way to disable the drop downs on mobiles, perhaps using media queries?
The reason I want to do this is because there are a lot of pages and some links are on a 3rd tier which flies off the mobile screen. The top level navigation have links to the sub menu items anyway, so in mobiles I would like to just have the top level items shown, and disable the sub menus from being displayed.
Also I am not using the nav collapse with icons, as I didnt want to use it on this project.
Yeah it can be done by Media Queries. This one targets mobile devices:
#media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
.navigation {display:none;}
}
Of course, you will have to keep an eye out for the sizes of the screens now days. One alternative solution would be in JavaScript, and check the userAgent:
if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android|BlackBerry|webOS|Windows Phone)/i)) {
// I'm a mobile :-)
}
Is there a way to implement show hide divs in a responsive website once the viewport contracts to say a width of 500px?
What I want to do is when the viewport contracts to the width of 500pixels each of the current divs can be hidden by show hide or a toggle or some kind of accordion?
What this means is that these functions do not "kick in" until the viewport contracts to this width.
Is this possible?
Here is the site I need to do this on:
http://surfingthebluemarble.com/mnews.html
Right now when this site contracts, the content is way too long. I need to hide to be able to hide and show those divs on click.
Thanks in advance for your help as always.
Regards,
umbre gachoong
Yes, you can create css targeted to certain viewports (screens)
e.g.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Refer this