I'm having an issue with hidden scrollbars after a div is hidden then shown again. Everything works fine on page load, but after the divs are closed with the toggle button and re-opened, the scrollbar is still invisible but the screen real estate where the scrollbar would be is rendered, pushing the nav menus away from the screen edge and creating a blank space. Could someone kindly point me in the right direction here? I can't provide any sample code, but you can see a live demo on my website using the "Slider" skin. The left and right navigation menus are what is giving me problems. Thanks in advance. :)
Related
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
This is my first time on SlackOverflow, i hope that you can help me.
I'm trying to achieve something tricky regarding my skill on development and specifically on Bootstrap.
I've created a template with dual Navbar (top and left).
The left one is a fixed navside where there is 3 kind of experience : Expanded, Not Expanded, Not visible.
As you can see, my Expanded NavSide is working perfectly with Scrollbar and Dropdown inside the nav
Expanded SideBar with Dropdown
The not visible experience is also working perfectly.
Not Visible SideBar
When i'm working with my not expanded SideBar, everything is perfect if i don't have too many item menus. If i have too much items i can't scroll on the Sidebar because i've only activated my css for expanded js.
Not Expanded SideBar without Scroll
Where is the issue ? I want to keep the same experience for the not Expanded version with Dropdown displayed on the right of my navside. But if i put the overflow-y scroll on my navbar, the dropdown on the right side is not displayed anymore (but the scroll is working well).
Not Expanded Sidebar with scroll but no Dropdown
Any idea if what i'm trying to achieve is possible ?
I can share my code if needed :)
Many thanks !
I'm working on a project. There is an issue on the front end side. The site is responsive, but when I view it in mobile width (specially for iPhone 4 & 5), the vertical scroll doesn't work.
I'm not using any div that needs scrolling, the whole page is not scrolling vertically, I'm afraid I can't provide the code. The thing I wanna know is why does this happens? and what would I've possibly done wrong?
1) I have added -webkit-overflow-scrolling:touch on body tag but my chrome browser is not picking it up and saying invalid property.
2) I have added body{overflow-y:scroll,position:relative} Now its showing a scroll but there is no bar between the scroll, and its pretty much stuck there.
I think its because of position and z-index the z-index value make problem in your small screen.
Its possible that the element which have high z-index value. stopping you for scroll.
and It can be possible you have overflow:hidden in wrong place. It will be good, If you show some code of line or your site link.
The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
I've already modified the overflow: hidden, to be set to overflow: auto, and this works quite well in the .header-container, although it seems that although this fixes the problem, there is still the issue when this is set that the images (such as the iPad at the top of the page, then overlaps the next section below it).
Thoughts on how to make sure either the image extends the container so it doesn't run into the next one, or how to fix this once and for all?
Just a thought, could this possibly be the Javascript, as I noticed that the menu bar when scrolled down doesn't dissapear until hovering over an active/Javascript link in the nav bar.
Your support is greatly appreciated :)
If you put a console.log in your call:
if ($(window).scrollTop() > 500 && getScreenWidth > 767) console.log("true")
else console.log("false")
Do you see in your console log the value changing when you scroll down at your homepage? And is this the same output as on your bookkeeping-plans page?
and does it also appear if you remove the slideup and slidetoggle functions?
$(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').slideToggle(250);
This is what I can think of that is conflicting your code based on what I see on your website
I'm using bootstrap-modal to render modal windows.
When the site is RTL, the vertical scrollbar is on the right side. When a modal opens, the scrollbar on the right side disappears and another scrollbar appears on the left side.
This can be reproduced on the demo site.
Just $("body").css("direction","rtl") on the console to get the scrollbar to the right side and than open any modal.
Why is second scrollbar on the left side? How can I make it stay on the right side?
I see just the opposite. When the site (body) is RTL, I never see the vert scrollbar on the right side. Always on the left. That's how it's "supposed" to be.
You can't change it -- at least not with a browser scrollbar. It's on the left because that's where the scrollbar "belongs" when the direction of the site is RTL (at least according to the browser...some RTL readers think it is weird).
You can use a javascript plugin or roll your own custom scrollbars, but if you put it on the left when the site is RTL, you're changing the default browser behavior, and you're going to give yourself a lot of difficulties to integrate with bootstrap.
EDIT
Per my first comment below, I was viewing the demo page incorrectly. Sorry. The scrollbar that appears when the modal opens is on a div that represents the modal backdrop. The browser applies this correctly according to the direction of the page being RTL. But it's not the window's scrollbar that is flipping when the page is RTL; it's a div.
You can potentially use CSS to remove the scrollbar of the modal backdrop (around line 16 of http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css).
This has other consequences, however, and probably similar to the ones you're trying to avoid with the swap in direction of the window's main scrollbar.