I am working at this site http://www.digiruptiva.com/site/
If you scroll to "Serviços" section at the home page you will see a row of icons and a blue button with the text "saber mais". When you click in the button, a modal opens containing more information.
The problem is: Some links in the top menu like (Quem Somos and Serviços) arent clickable becuase the hidden modal is getting in the way.
I tried moved the modals before the close body tag but still the same problem. I found a topic here an S.0 saying that adding data-backdrop="false" to the modal element solves the problem but I want to have the backdrop.
How can I fix this?
Thank you.
Well, i think I solved it by adding .modal { display: none; } to my css ile.
Related
On my website https://www.hcldesign.co.uk/ you can see that I have a top banner.
This banner has a button saying 'see website example' and when this is pressed it changes the slide image. Now this also causes a weird screen position glitch with my navbar and content/body section.
When you click the button you can see a gap appears on the left of the body and pushes some content to the right by a few pixels and then flicks back. The position of the navbar also does the same when the button on the slider/banner is clicked.
I have tried messing with the position code for some of the elements but can't seem to fix this.
I need to keep the page content in the same position when the button is clicked.
Its caused by this CSS rule:
.ls-overflow-hidden {
overflow: hidden;
}
This class is added to your <body> element when clicking "see website example". Change the value to i.e. overflow: auto; and the glitch should be gone.
On clicking the button of the slider .ls-overflow-hidden class is added to the body. You can fix it by the css rule
body.ls-overflow-hidden {
overflow: auto;
}
I'm using Simple Tooltips plugin to add tooltips on my menu icons. https://wordpress.org/plugins/simple-tooltips/
I have a vertical menu and my problem is when I scroll the page the tooltip scrolls up and down as well. I checked the plugin settings and theres no option to make it fixed in position. How can I fix that issue with CSS? As much as possible I would like the tooltip to appear to the left side of each icon menu fixed in position.
You can check our site here http://scaleup.onebonsai.com
Thanks ad I hoe you can help me.
You need to add a position fixed to the Zebra tooltip class.
Try this.
.Zebra_Tooltip {
position: fixed!important;
}
Cheers and happy coding!
I am doing a popup light box by using the code I found in this article HTML / CSS Popup div on text click.
Now I am trying to disable the main scrolling of the page, since the light box has a fixed height, but certain pages are longer then the popup which leads to scrolling the background of the popup which in this case is the page itself.
I played a bit with overflow but without success.
Try the following CSS:
html {
height: 100%;
overflow: hidden;
}
Also, if you trigger this code on a random location in the page, you might need to do extra work.
Do you have a jsfiddle or codepen?
I absolutly know that you will downvote this question, but I cannot repeat this problem in jsfiddle or with custom html, so I can only show it using webpage.
If I understand the problem, I will update question with appropriate html code.
If you visit website http://tax.allfaces.lv/, you will see three menu items. If you click on first or third menu item (Home and Contact US), then everything is fine.
Merchants contains submenu. It is not so obvious, but if you click on second one (Merchants), then you see that the whole content is moved some pixels to the right comparing with Home and Contact Us page. If you just click "Home" and "Merchants" one by one, you can see that for "Merchants" all content is some pixels to the right.
EDIT:
This is related to webpage height and scrollbar.
Add this code to your body to keep the scroll bar all the time to avoid this issue
body {
overflow-y: scroll;
}
It's because the scrollbar disappears because all of the content fits in the page :)
its because the scrollbar on the side dispears ;)
what you could do is show the scrollbar at everypage so it doesnt move.
I'm trying to create simple mobile version of my simple horizontal one-level top menu. I'd like to replace the horizontal top nav with a vertical menu that is initially hidden but shows up when the user clicks the simple menu link in the top right of the screen.
In fact you can see what I've built so far at http://www.janparker.co.uk if you squeeze you window to be less than 768px.
It's almost a beautifully simply pure CSS result.
The menu works perfectly, but if a user first clicks on "menu" to activate the menu, then doesn't use the menu but instead clicks on some other link on the page OUTSIDE of the menu, a problem arises.
The link outside the doesn't work. Worse because the menu also closes and the page scrolls (both natural and not undesirable behaviors) the combination is utterly disorienting to the user if they are scrolled a long way down the page.
The code is:
<a id="menu-invoker" tabindex="0">Menu</a>
<nav><ul><li>First menu item</li><li>second menu item</li></ul></nav>
<p>Some other link</p>
#menu-invoker:focus ~ nav {display: block;}
nav {display:none;}
ul:focus, ul:active, ul:hover {display: block;}
or see the fiddle: http://jsfiddle.net/YNxVs/1/
Any solutions? What's the simplest way to achieve this?
Jonathan
The problem is that #menu-invoker no longer has :focus. One solution might be to position: absolute; the nav, so it floats on top of the other content. That way the scroll-height will never change.
(the links outside the menu work in Firefox, but not in IE or Webkit. Not sure which is doing it "wrong")