How to get a mobile bootstrap navigation to remain on top of the screen - css

I have recently deployed a website online using bootstrap as the front-end framework. I included the jQuery button to have the menu dropdown on clicking on it. During tests using my Chrome browser emulator, the navigation seems to work well, with it dropping down over the rest of the website content. However, on checking the same site using my iPhone 4s, the nav shows briefly for a split second and then disappears. I have fought tooth and nail with the CSS, but I can't seem to crack it. Any help would be greatly appreciated.
The web address is www.dof.com.ng
Thanks in advance.

Related

Calendar plugin not displaying nav arrows in mobile browser

I am using an Availability Calendar plugin on my small cabin rental website, for which I am building a mobile version of (using Bootstrap).
The arrows appear fine above the calendars on the desktop site here,
but they do not appear in the mobile page here (note that they do seem to appear and function correctly in desktop browsers, just not in mobile browsers).
Any assistance or advice anyone could provide here would be greatly appreciated.
Thanks!
k

Blank screen between page changes on different browsers in ASP.NET

My ASP.NET project seems to run the best in Firefox.
Mainly while someone is navigating around the site, Firefox has no blank pages of white screen while the page is changing, and it looks like it's not reloading the top nav bar of the page or the footer/wrap around the partials that go in the middle.
Chrome and Internet Explorer (obviously) not so much. They seem to reload the entire page every time there is navigation performed.
Is there something I can change about my project configuration that would cause this kind of behaviour? I suppose it isn't too important but it would be nice if it looked as good on Chrome as it does on Firefox.
If anyone wanted to see code from a specific place/config in my ASP.NET project I can post it.

Photoswipe working on browser but not on devices

I'm a beginner and I'm trying to use photoswiper in a PhoneGap app. I'm trying to use this example :
[http://jsfiddle.net/Gajotres/PFqVs/][1]
that works great in any browser, but just don't work on any device.
When I open, it's like I have a css issue since I don't see any king of style and when I touch any image, I just see it full size but can't swipe to see the next one.
Any help will be appreciated!
May be you should mention all sites with external resources in the WhiteList?

smart app banners get hide with mobile safari address bar

I know smart app banners is not a part of the document,so "window.scrollTo(0,1)" will got it hide too.
Is there any nice way to deal with this?
I had the same problem and eventually tracked down a solution in the HTML5 Boilerplate mobile code. The details area in my question, Hiding address bar without hiding the smart app banner on iOS 6.

Rendering image on the mobile browser?

i am creating a mobile site, now my problem is the images are getting render when i run the site on PC, and also while running the site on IPhone, but when it comes to Opera Browser for any symbian based mobile, the images are not at all rendering..
i am using asp:Image control on the site.. is this causing it not to be displayed on mobile.
if yes, then whats the equivalent for the mobile control. and also i want to resize the image as per the aspect ratio almost all the images are big in dimension.
Please anyone have any idea for the same, i will appreciate it.
If you wish to have your pages and images resize automatically based on the size of the device on which they are being viewed, you might find an answer with Zurb Foundation. I use it in almost all of my web "responsive web design" projects now.
http://foundation.zurb.com/

Resources