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!
Related
Does anyone know the problem? This happens for some other pages!
enter image description here
Give searchbar z-index:50 and z-index:10 to sidebar. This way searchbar will stay beneath the sidebar.
Add margin-left = width-of-nav whenever nav is visible(non-collapsible mode).
If you simply want the nav bar on top and the search bar to be not used then useoverflow: hidden style to search bar/entire page content except nav.
Other way is to add z-index to change the stacking order.
navbar :
position:'sticky'
main:
z-index:100
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
}
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;
}
I have my main nav fixed on the bottom of my page and want the navbar to animate up when clicked on instead of animate down. Can someone please help me out with this or send me in the right direction? it is not a dropdown menu i know how to make the dropdown menu drop up. when the width is a certain size it turns into a dropdown menu and i would like for it to animate to the top when clicked on instead of the bottom.
any help would be great thank you.
Is this what you looking for?
old bootstrap 2.3.0:
http://jsfiddle.net/zalog/Apx5N/77/
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
}
latest bootstrap 3.2.0:
http://jsfiddle.net/zalog/xC7a5/
In the latest version of bootstrap, this is the default functionality.
I've been troubleshooting this for a while now with no luck so I'm asking here in case someone is inclined to have a look. Thank you in advance.
On this website:
http://www.oldsaltmerchants.com/
I have a one page layout with a menu that scrolls the page to the correct location. Once the page scrolls past the top section a nav-menu drops down from the top edge of the window. The yellow bar is supposed to span the full width of the page but it is hidden in the margin areas and only displays in the "content" area.
I could really use another set of eyes if anyone is interested.
Thanks so much.
may not be the correct answer but may give some clue. I changed width to 100% and add text-align: center
The problem is with your #menu.pinned ul CSS selector's width: 910px attribute.
Remove it and it should display just fine.