This is a small enough problem, but i can't seem to find where to adjust the z-index so that my dropdown menu appears on top of the slider layers. Currently the drop down is visible but not clickable. any help is much appreciated. It's a wordpress site and here is the url: http://goo.gl/Ch5pju
add z-index:2 to your rev_slider_1_1_wrapper element like following. The other ones shoul be inherited.
#rev_slider_1_1_wrapper
{
z-index: 2;
}
Related
I'm trying to design my first responsive site and am having issues with the navigation. I've got everything somewhat working up to point where the hamburger kicks in. At that point, the drop down menu goes behind the form elements and I don't understand enough at this point to change the styling without affecting the normal navigation.
It seems that most of the things I've looked at are using the standard BootStrap elements with little more than color changes. I need to change the height of the nav bar (along with the hamburger), center the nav but when the site goes mobile, the nav dropdown would need to change font and background colors and text alignment.
I've got a bootply running and will continue to research as I go. I know I have a long way to go but would appreciate a helping hand getting me over this hurdle.
The bootply is at http://www.bootply.com/xtOWUEP1bw. Thanks in advance for any help.
You need z-index and background color.
Put z-index in .navbar and put background color in .navbar-collapse.in like below;
.navbar {
z-index: 10;
}
.navbar-collapse.in{
background:#fff
}
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!
Recently I am working on a new website and I am creating it with bootstrap. Here is the bootply link that have my website.
http://www.bootply.com/9pUX4JwEYb
According to that HTML in this Link, I have a trouble that i cant fix yet. When I am scrolling up, the text "Main Bodysssss..." is going over the navigation bar. I have tried to position it but no help. Just tell me how to fix this. Many Thanks.
A higher z-index for .navbar should fix this (working example):
.navbar {
z-index: 10;
}
From the documentation,
When elements overlap, z-order determines which one covers the other.
An element with a larger z-index generally covers an element with a
lower one.
I have a fb like button on my website but when a user clicks on the button the the pop up comments box is hidden behind the two elements (#centre and footer) and the user can do nothing with it.
My question is, How do I change the z-index of the flyout so when a user clicks the like button it appears in front of other elements?
I have looked at these questions and implemented their answers with no luck in fixing the issue:-
facebook iframe App: Send/Like button z-index issue
Other fixes I have found that did not work were:-
Elements that appear in front of/around the flyout should have overflow: visible; set. (From fb developers FaQ page.)
Changing the z-index of the classes that are listed in the answer from the link above.
Changing the width and z-index of a class generated by the iframe, and located in a script tag, called _56z-
All I would like is the flyout to appear on top of all elements on the page without having to change the layout.
Here is the link to my site http://mikelonsdale.co.uk
Thank you for your time and help.
Change the z-index for your #centre and #footer div's to negative values. This should fix the problem.
Don't forget to change all of the other elements in relation to your site. You will be moving the #centre div to at least to z-index: -2 (to allow room for the #footer div to fit in at -1).
The following code fixes the problem entirely, without having to change the overflow or z-index of anything. You simply add the code below, and voila. HOWEVER, it will throw off your site's layout a little (it will flow over .. ha). Amazing fix, small catch. Borderline acceptable but the best solution I found. (Found it on the WP forums).
.fb-like span {
overflow: visible !important;
width: 450px !important;
margin-right: -375px;
}
I added
.fb-like span {
z-index: 999999999999999;
}
to my css and that fixed it. It isn't even marked as active, and deactivating it in developer tools doesn't change anything either. If I take it out of my CSS things go all stupid again though.
In the below image my drop down menu is not displaying over the content.It is very transparent know.Can anyone help me what I have to add to make this drop down menu un-transparent.
Your dropdown is probably a div in the html dom. You could find the name of that `div' and then apply a background to it using css:
.dropdown_div_name { background-color: white; }
Edit:
Re looking at the image you posted it is most probably a problem with the z-index as others also suggested, since for example if you look at the 'Technology/Connected TV' header, that shows over the menu contents. That could be fixed by changing the z-index of the dropdown menu
.dropdown_div_name { z-index:100; }
where 100 should be a number bigger than the z-index of the rest items that you want it to overlap
A background-color. Without one, the default colour is transparent, hence you see everything behind it.