I'm trying to develop an horizontal scrolling for a landing page. I'm trying information that I found here. But I want to make something similar, but not exactly that...
In that Web page, we have two elements:
We can see we have a menu, and an horizontal list of boxes. This list works as expected: if you press on a link on the menu, it jumps to the correct box. If you go to a mobile browser, it scrolls right and left using your hand.
But, when you scroll right with the mobile browser, the menu on the top, stays at the left of the layer, disapearing from the visible part of the Web. If you do so with a computer browser, the menu stays always at top left.
I want the menu to always stay at top, even if I'm using a mobile browser, so I can scroll, let's say, some images, without hiding left the content of my Web Page.
How can I do so?
I hope I explained myself correctly.
If you also think there's an easier way to make a scroll horizontal, I'm open to suggestions.
PS: I want a kind of result like this:
Mobile browsers have issues with fixed positioning - see this article which also provides a list of JavaScript Solutions.
Related
So I made a basic slide out menu for the mobile view of my site that sits beneath my page and when you click on the label for a hidden checkbox, the inner wrapper slides to the right revealing the menu. It works well and is really responsive on mobile. The only problem I'm having is that I am now unable to click on the links. I've tried raising the z-index and that hasn't done a lick of good.
Any help would be hot.
Here's the link to the site: flatland.mattmcelwee.com. Shrink your browser or use Chrome's mobile emulator to look at it.
Check you div side-menu z-index, its -2 make it 0 or take it off!
I am trying to use Twitter bootstrap's sidenav, as seen in their "Getting started" guide on the left hand side. I have managed to use their page as an example and build my own sidebar. However, I noticed that on both my sidebar and theirs, the links to anchors do not work properly. It scrolls to the point below the anchor by maybe 40 pixels. This cuts off the top of the header.
For example, go to the "Getting started" guide and on the side navbar, click on "Additional downloads." It scrolls past the header and cuts off the top part of the section.
Does this happen for anyone else? It happens in my IE, Chrome, and Firefox running on a Windows machine. I can't seem to find the cause of this to fix my own side navbar.
I have an issue which I assume is CSS, but I cannot seem to find the fix for it. I am using a WordPress theme (the site can be viewed here: http://sencb.com). Everything functions as intended, unless the screen size is somewhere sub 1050px wide. I know most modern monitors are much wider than that, but this is still a fix I'd like to find. The problem, when the screen/browser window is smaller in width, usually somewhere around 1050px, the whole scrolling content side (the right side) shifts left over the fixed area and navigation menu. I've tried just about everything I can think of, so I am in hopes someone here can find the fix. Thanks in advance!
The problem is the sidebar is using position fixed. Whatever the browser's width/height and scroll coordinates, the sidebar will always be in the same place in the window. The content area, on the other hand, moves naturally and is able to appear anywhere on the browser window space. Sometimes it just happens to overlap the sidebar.
Try adding z-index: 300 to #main-leftarea and see if that works for you.
I just installed buddypress on my wordpress powered website and I would like to prevent the admin bar from following the screen as you scroll down. How can I make it stay stationary at the top of the page and allow it to go out of view as you scroll down?
Thanks for any help.
Without knowing anything about how they implement it... Items staying put in the window can be handled through css with a position: fixed; top: 0 type syntax. Changing the position to absolute is probably the most straightforward change; it will change to just being stuck along the top when scrolled to the top instead of stuck along the top always. Or there are a number of ways to do it through javascript. Do you know how it's working? Try inspecting the element in a browser (firebug in firefox or chrome) and checking what css rules are applied to the header. Or post a url, at least.
I am working on our new corporate website. I took over for someone else. I just resized the IE8 window to make it smaller and the left side of my page is cut off. I get a scroll bar at the bottom of the window, but it won't let me see part of the left side of the page. There's nothing weird about the site. It's html with some javascript and a couple of stylesheets that were created by the previous developer.
Is there any way I can prevent this from happening? Or force the bottom scroll bar to allow me to go all the way to the left side of the website?
Check for some rules in CSS styles with margins set to negative values. Probably the positions of your containers got messy after you change the size of the window.