I'm working on a site, http://six03.com/ART which is currently in development. I thought I had everything all wrapped up for deployment until I had gone back in 320x480 mode on mobile and none of the links on the slideout menu do not work on any mobile device I have tested, at any resolution, on any page.
I have updated and reverted back to a working copy of jQuery, I have tried z-index:1; I have thought of all I could and researched all I could with no avail. Now I am asking for some help here.
I'll do some research in here as well to see if there are any similar problems, or if anyone knows of a thread similar to this, a point in that direction would be greatly appreciated also. Thanks.
I'm going to assume that you mean only the 'testimonials' and 'contact' links in the menu don't work, on the homepage only.
If this is the case, your problem has nothing to do with jQuery.
Your .region element is also positioned, and so it is being rendered over the menu.
Setting nav {z-index: 1} and .region {z-index: 0} should fix the problem, as it will bring the menu over the other positioned content.
I ended up getting rid of the repetitive icon that I had in the menu, I didn't need it, placed a z-index: 1; on the nav container. I also changed the positioning of the menu-icon to relative instead of fixed and that fixed the problem in the mobile devices I have been able to test in.
unless this was a design feature, the hamburger icon is no longer on the top left and in the hero image when the desktop browser is scaled to narrow width.
Related
Help me. I need to make a button that does not move along with scrolling the page
It can be a button fixed on the page and
It can be a sticky button
it can be a popup button
are you using position: sticky and are you giving it a top or bottom value? Without top or bottom it won't just work.
Have you checked if you browser does support position: sticky? That could be the cause as well. If your browser doesn't support it you might need to implement some javascript fallback
I have put together very recently an article on medium that you can check here if you want to know the insights of it and some examples that might figure out what's wrong
I'm making a website which has multiple backgrounds ontop of eachother using Sass and Bootstrap. My issue is, in the mobiles view of the site, you can scroll left or right and I don't want that. Also, the navbar is really messed up - the toggle button makes it go far too high.
Here's a JSFiddle: https://jsfiddle.net/4z5ty868/
I think the problem is somewhere in or around the navbar, or maybe an incorrect number of <div>s?
Basically, I'm super confused!
Hope somebody can help me.
The problem is with your btn class. You've included white-space: nowrap; there, causing the buttons not to yield to the screen edges. Remove that line or overwrite with white-space: normal; and your horizontal scrolling issue is resolved.
Before:
After:
I've been working on a personal website for a class project. I've come across some bugs in it that I can't seem to get fixed. You can find the website at bnb.im or at CodePen (the codepen is mostly copy and paste; I did the best I could with it).
So, the first problem is the white space to the right of the screen. I can't tell what's causing it--when I use the Select element feature on FF, it just selects <html>. I asked on another site, and someone said that it was caused by the animation of the portfolio items sliding in--I tried the fix they suggested, adding overflow: hidden; to body, but it didn't work (the page became unscrollable). I also tried making the portfolio items smaller (45% instead of 50%), but that didn't help, either. Any ideas?
The second problem is with the portfolio items and/or the social section. Whenever I try to add margin-top or margin-bottom to put some white space between the last portfolio item and the social section, nothing happens for the most part. The only time I've gotten it to work is when I put the margin-top on the social section to 200%, but it was too much so that won't work. Any ideas with this one?
Thanks a lot--I really appreciate you taking the time to read through this and (hopefully!) look at my site.
The first problem looks fixed to me? Did you figure it out?
The second one take off height:100%;from .portfolio
Check it out here: http://bit.ly/16DJQjN
When I resize the window down to a lower resolution, everything is fine, the navigation menu turns into mobile version. But just try to get the page narrower and refresh the page, you'll see the items drop down one after another in an irregular way, just resize it once more, it's perfect again. That way, it doesn't seem alright on lower resolution devices when first opened.
To give you an idea of what it looks like, that's how it looks when the page is opened in this resolution.
But when I just resize it in any way, it looks perfect, see:
I checked the JS and CSS, obviously it's not done with media-queries thing, I believe it's pure jS. How do I fix it? Can you help me?
Add this css to your style sheet this will hide menu until javascript load.
.responsive_nav ul{
display:none;
}
I'm working on a menu panel for my jquery mobile website. Sadly I have a issue with overflow. What I want is that the menu comes in from the left and pushes the jquery mobile page to the right and partly outside the viewport.
This works all good on desktop browsers, but for some reason I get a horizonal scrollbar and I can 'scroll' away from the panel to the right(in to the actual page). I don't want this beheaviour ofcourse.
Tried various things with overflow and position but I can't seem to fix it.
I have created a stripped down version from my website on jsbin:
http://jsbin.com/uhucec/4
Any help would be realy appreciated.
Found a fix to this problem.
I have added a css class:
.ui-page-fixed
{
position: fixed !important;
}
I apply this class to the current page when the panel is open, and remove it when the panel is closed.