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
Related
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 need help creating something like this link (http://www.standardchartered.co.in/borrow/)
When the user hovers over the navigation, the grey triangle image will appear. I'm not very sure how to go about doing it. Please help!
The best way to do this is to use a plug-in, possibly for jQuery. There are many drop down menu plugins available. A google search for "jquery drop down menu" will help you. One of the first results for me is:
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
The second one down on that page appears to have the effect you want, but it also depends on how you want the rest of the menu to appear. You will need to do some research and choose one that suits you.
OR, if you just want a grey triangle to appear, without the menu, when you hover over an element, then some css like this is what you want:
li:hover {
background:url('./images/grey_triangle.png') center bottom;
}
Which says, when the li element is hovered, use ./images/grey_triangle.png as the background image and place it in the center at the bottom of the element. You would need to create your own grey triangle, set appropriate padding etc, but that is the basic css you need for the effect.
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.
Stack,
I'm having difficulty creating a good drop down navigation menu using only css. The menu is simple, it needs to only have a few things in it, and only needs to drop down (no need to go down and over etc).
The menu is somewhat working, but whenever I hover over it to drop it down, the menu gets overlapped by the wrapper div directly below the header div where the menu is located. I've tried setting the z-index of the drop down menu to like 20000 and it is still being overlapped.
Here is a direct link to the test page I am working on:
http://www.lolbrary.com/workspace/dropdownheader.php
Any ideas?
Thanky,
billmalarky
In #fullheaderbar and #profilemenu you need to remove overflow:hidden; and in .profile-menu ul you need to change position:relative to position:absolute;
then tweak from there :)