Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I need to style my custom scroll bar, as of now i didn't get any solution to achieve the desired results.i tried to use ::webkit-scroller properties but its not working.
You can do this using jQuery plugin.
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
all you need to do is wrap entire code into main container and apply jQuery custom scroll plugin to it and apply you custom css accordingly...and you are done.
Please Check this scrollbar plugins on below links
http://jscrollpane.kelvinluck.com/
http://areaaperta.com/nicescroll/
http://manos.malihu.gr/jquery-custom-content-scroller/
Try these pseudo elements and pseudo class selectors
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
/* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/* Select the down or left scroll button when it's being hovered by the mouse */
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
I've got a problem on my client's website, here is the link: https://www.wisetrailrunning.com/products/nanoshell-160g-pour-homme
I don't think it's a Shopify problem, I think its css.
When you scroll down, the fixed header is above certains elements, and behind certains elements.
I've tried to set a z-index to the element and his parents.
I've tried to set opacity 1 to the element and his parents.
I've tried to set background color to white to the element and his parents.
I've tried to set the positions to the element and his parents.
Nothing worked.
I've searched for many topics on the website but didn't find a working answer after few hours.
Thanks a lot for your help !
I've checked your css and should work only adding this
.transition-body {
z-index: 1;
position: relative;
}
That happens because z-index work in a way you have to put it on main parents. That's why I added it on .transition-body and not in header. Because .transition-body is the parent of header and it's in the same html level than .shopify-section
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
On the mobile version of the website, you can scroll to the right to the navigation, which should actually only be accessible via click. How can this be changed?
(URL removed)
I have already tried many different solutions that I have found, but nothing works so far.
I am looking for help in this individual case.
Thank you very much :)
By moving your .main-nav element with transform to the right you extend width of the visible content, and since your scroll properties are default it will enable you to scroll the entire visible content, including that menu.
What you want to do is clip everything that is outside of your html or body element.
CSS
html {
overflow-x: hidden;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
On chrome the drop down menu appears behind the top most image at this page I am playing with.
http://www.audiobookreviews.com/genre2.php
I messed with the z-axis and set all z-axis for the menu to 999, then also tried making the image bigger/smaller but still happens.
Replace center tag with section since center is obsolete. You need to set your element's z-index in such a way that element that has to appear on top has higher value of it. Something like this:
.w3-dropdown-content {
z-index: 999;
}
section {
z-index: 1;
}
P.S. I know you provided a link to your website but it's more useful to have a certain chunk of code you are refering to posted here.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I just started learning HTML/CSS and I've encountered a problem. On my website (www.seandorsman.nl) I have a nav bar on top with a drop down menu. The menu works fine but it is behind the slideshow I have on the main page.
Is there a way to make the navbar always appear in front of the slideshow?
You want to use z-index: in your stylesheet, so I would make your nav bar a higher z-index than the slideshow. This is basically a hierarchy of where elements lay on top of each other, setting z-index: 999; in your css for the navigation bar and drop down should fix your issue.
I would try to show you where exactly to add it but the link you provided does not seem to work.
As other people have mentioned, you will want to apply a high z-index to the navbar. However, for this to work you will also need to apply position:relative;, as z-index requires a position to be set.
you can add a z-index to your menu items. for example, if your css is like this:
#menu li {
z-index:9999;
}
it would take all of the list items and move them to layer 9999. sometimes the position attribute can play into this as well, but I would try modifying the z-index first.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a widget in my wordpress site that displays last 10 posts. The whole display image+title with 10 posts make the widget looks huge. I was thinking if its easy/possible to display only a specific size for example 300 pixels and have a small scrollbar on the right to see the rest content.
Example
#recent-posts-widget {
height: 300px;
overflow: scroll;
}
Above is the most simple way to achieve this (replace #recent-posts-widget in your CSS with the selector of the widget container on your site). Need to see the relevant HTML markup and CSS to give you more specific instruction.
That will produce a "default" scrollbar like you see at the side of the browser window. If you want something less ugly that you can style further to be like your site, look into using jScrollPane which allows for much more beautiful scrollbars and has great cross-browser compatibility.
You'd need to set max-height:300px and overflow:scroll of the specific widget (each widget has it's own class/id, set this inside your style.css).
This should give you a vertical scrollbar if the widget is bigger than 300px.
Hope this helps :)