Issue with Bootstrap mobile menu not appearing - html

I am using Bootstrap 3 on a site and I found a weird bug that I can't figure out. It deals with the mobile menu on smaller devices. When I view the site on iOS I can see the menu icon appear, but when I click on the icon the menu does not show up. However, if I then click an area where the menu should appear, the link works and takes me to a page.
To add another variable to the problem, when I view it in chrome with the dev tools acting as iOS and the screen small, the menu shows up and works as intended. So I am at a loss how to debug the issue.
I have tried setting the z-index to 1000 with no luck. I have not been able to find documentation regarding this issue. If you have run into this issue or know where there is documentation for it I would really appreciate some help.
Here is a link to the site with the issue(on mobile devices). http://dd.cakeandeatitdesigns.com
Thank you for your time and help!

Hey in my personal experience working with that it could happened when you open your web page with safari in IOS. I don't know what are you using to show the lateral menu, but some times safari doesn't work with certain js.

Related

Mobile scroll does not work on mobile devices

On mobile devices, scroll down does not work when the services tab is clicked. I can't find the problem for hours. Anybody have any ideas?
The problem is class="page-overlay" have position:fixed;.
If you for example set it to absolute or none all work.
Brand Identity and Online Marketing do work. I opened the developer tools and saw that the div.logo.white is on top of the first two h2. That is probably what causes it, because the functionality works fine. Other than that, great layout and style.

Why won't my menu open on mobile devices?

I work for this organization (Vibro) as responsible for the webpage. Today I was told that our website menu won't open on mobile devices. Here's our page: www.vibro.no/
Can you see any errors with this?
Thanks for replies!
I found out that it was some changes in general.js that I did a few days a go that made the error. So now that the code is deleted, the menu button works fine.

Website does not render correctly on mobile browser(s) after upload to server

I'm not an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.

How to recreate mobile css error on desktop view

I have very strange question. I have site http://www.printer1.ssk.pl/ and problem with search (right side). When I vist this side on computer or even on firefox with mobile view (720px x...) this search bar is display ok. But when I check this website on my phone the search bar is display wrong. I want to recreate this problem on computer, firefox where I can fix them. But now I can't recreate this problem. Anyone know why ?
Also I install switch agent to firefox. With no results.

Scrolling and pinch disabled on mobile browser

I am building a website which works fine on browsers on a laptop but when i start using the same on a mobile browser, i see that the only thing I am able to do on my mobile browser is to double tap to zoom in and be able to click and type.
I am not able to scroll or move the web page around to change the view port.
Has someone experienced the same problem before?
I am using bootstrap for this and the layout is responsive.
Please help.
Thank you