This is my first question in stackoverflow, so I will be quick and precise.
I am dealing with a css/z-index related problem in a website. The url of the site is http://birthz.com and the problem is that the slideshow overlaps the submenus of the top menu. If you hover for example over "Skin care" there is a submenu that show up, but gets hidden by the slides of the slideshow.
Does anyone have any suggestions? I tried increasing the z-index of the submenu's ul element but no luck.
Thanks!
add this
div.MagicToolboxContainer {
position: relative;
text-align: center;
z-index: 0;
}
Related
I'm trying to make a CSS only sticky menu. This menu is inside another div under the header of the website. But as the user scrolls it should remain visible on the page. Googling and looking for answers here I found a good example of what I want to achieve: http://jsfiddle.net/g7x102s4/ (the red div)
My problem is that I'm doing this inside a React app where I can't install any other plugin, so It has to be done in pure CSS. I made a codesandbox where I'm trying to get it working. The menu class can float inside the menu container, but always visible to the user. It's the same effect from the first link above, just without JavaScript.
Is it possible? If so, how can I achieve it?
Add properties position:sticky and top:0 to your menu.
.menuContainer .menu {
background: red;
height: 300px;
position: sticky;
top: 0;
}
So the website I am working on is www.Titusmountain.com. As you can see when you hover over the menu, the submenu appears a good inch below the menu. As you scroll down the site and hover over it, the submenu gets further and further away. Any idea as to what is causing this? I'm not all that great with HTML and CSS.
I've looked through the code and changed a ton of things to no avail.
The current .wsite-menu-wrap class has top:80px which is causing the gap between the menu and the submenu.
Changing it to top:0px will remove this gap
Remove margin-top from header and change
.page-content-wrapper {
height: 100%;
position: relative;
}
to
.page-content-wrapper {
height: 100%;
width:100%;
position: absolute;
}
Maybe these modifications can break something else, let me know
Good morning, I have a menu where you need it has a vertical side bar. As you can see in the picture, I could add it. However, when the mouse pointer hovers over the menu items, submenus appear, but they are hidden by the bar. I would like the sub menus stay overlapped the bar, ie, they appeared in front, not getting hidden. Already tried changing the z-index of the submenu, but it did not work. Anyone know any alternative, or how can I solve this?
then, as the system menu is all dynamically mounted, I created an example in jsFiddle. The problem is that the menu has sub-menus, and when I try to access them, they are "inside" the box that creates the scrollbar. link: jsfiddle.net/tBJe3/10/
thank you!
try this one,
.menuLateral {
margin-left: 4px;
margin-top: 1%;
position: relative;
width: 35%;
height:200px;
color: #B2C2B9;
float: left;
overflow:visible;
}
http://jsfiddle.net/tBJe3/11/
In your code you have set position: relative; for almost all containers. If you remove them, your absolutely positioned sub-menus will be relative to the document and also will be on top of your scrollable content.
Here is the updated version of your code in JSFiddle.
Please note, that by doing in this way, some of your sub-menus will not appear where you want. So maybe you need to make with fixed positions or position them manually (and dynamically) using JavaScript.
I designed a vertical menu using CSS, li and ul tags. It works fine, but just for many hints. After some time, hover effect works just for the last item.
Please look at my project here: http://www.saberi.ws/test/
Please move your mouse on the menu in the left side (Products, Countries, ...) to see this in action.
You can see related CSS file here.
Your #ticker is lying in front of your navigation. Add z-index: 0 to your #ticker and add position: relative; z-index: 1 to your #container_left_menu.
This will move your navigation over your ticker. The position: relative is neccessary, because z-index does only work with position:absolute, position:relative, or position:fixed.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
My solution is much simpler, to my mind. Simply add overflow: hidden; to your #news.
My web page is at http://www.sarahjanetrading.com/js/j/index.html.
In the navigation, when I hover or want to click on the first three navigation
items, they don't function properly. The whole of the area of the first three navigation items
are not clickable. The rest of the navigation items are working properly.
Any help would be highly appreciated.
Your logo is appearing over the top of the 3 items
If you reduce the height of the logo you can select the items
The logo (< div class="logo">) is above the first 3 elements, try resizing it.
.logo {
height: 45px;
}
Firebug is quite good to find these problems
As Curt said Your logo is appearing over the top of the 3 items . So, here is the solution just give z-index to your ul#nav DIV.
Like this:
ul#nav {
margin-left: 25px;
position: relative;
top: 22px;
z-index: 1;
}