I am currently installing a new website with a "max mega menu". The problem is, I can't get the submenu to show. I've tried with different z-index but I can't get it to work.
The second problem is, that the search menu is displaying on a new line. I want it on the same height as the main menu. How can i manage that?
This is the website: Link
Any help is appreciated...
by default submenus are set as display none and when mouse hover its set as display block but in your css you are set one more css as below as visibility hidden so just remove this
#mega-menu-wrap-main_menu #mega-menu-main_menu li.mega-menu-item > ul.mega- sub-menu {
display: block;
opacity: 1;
visibility: hidden;// just remove this
}
hope this helps
You have in css:
visibility: hidden; set. Becouse of that elements of menu is invisible
#mega-menu-wrap-main_menu #mega-menu-main_menu li.mega-menu-item > ul.mega-sub-menu
{
display: block;
visibility: hidden;
opacity: 1;
}
Just change it.
To solve search menu new line problem set float: left to #mega-menu-wrap-main_menu
#mega-menu-wrap-main_menu {
float: left;
}
Related
I am working on an E commerce application but the theme i am using add to cart button coming on hover effect but i want to make ( Add to cart button) always fixed .
the live working url is as following.
https://www.realfarmer.in/techy-new/shop.php
add to cart will come when cursor is on the product but i want it should come always
You need to remove the styles under
.product-wrap .product-img .product-action-2-wrap {
opacity: 0;
visibility: hidden;
bottom: -20px;
}
Which is hiding the add to cart button if not hovered. Or you can replace the same using
.product-wrap .product-img .product-action-2-wrap {
bottom: 0px;
opacity: 1;
visibility: visible;
}
So this is the code that's working when you hover over the product.
Add this code to your add custom code
.product-action-2-wrap{
visibility: visible;
opacity: 1;
bottom: 0px;
}
this will show add to cart button always visible in the products.
if it is work for you please give a like.
Just remove the background color on Hover using same color like that:
.product-wrap .product-img .product-action-2-wrap:hover .product-action-btn-2 {
background-color: #000;
}
I'm a bit confused about this but I think I've found the issue.
I have in my html:
<div class="dropdownz">
<button>HOVER_OR_CLICK</button>
<div class="dropdownz-content">
</div>
</div>
In my css I have:
.dropdownz {
float: left;
overflow: hidden;
}
.dropdownz-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdownz:hover .dropdownz-content {
display: block;
position: fixed;
top: 50px;
}
So this basically means if I hover over the dropdownz class, the dropdownz-content display converts from none to block and the menu items show.
When I run this on an android touchscreen mobile device, I have to CLICK the dropdownz item in order for it to effect the hover and show the list, if I click it again, it effectively removes the hover.
This is desirable behaviour, it means I don't have to do any extra stuff for touch-screens. A "hover" becomes a click and the 2nd click removes the "hover". Great!
Apparently this doesn't work the same in SAFARI on an iPhone. I can't test it myself, I'm going via a friend who says it's not working, so I basically want to know:
Is this a known issue and what's the best way to remedy it? (Without JavaScript, surely!)
I'm thinking along the lines of :focus ?
try this :
.dropdownz:hover .dropdownz-content,
.dropdownz:active .dropdownz-content,
.dropdownz:focus .dropdownz-content{
display: block;
position: fixed;
top: 50px;
}
So the final result I am trying to achieve is only show .panel-text when user hovers over panel. In this case I tried the overlay CSS class, since it covers the entire div. Yet whatever I do either the text doesn't show at all no matter hovering or idle or the text is displayed always. Below is what I have tried.
.panel-text {
display: none
}
.panel-overlay:hover .panel-text {
display: block
}
The above only hides .panel-text always. Another attempt at it is below:
.panel-text { opacity: 0; }
.panel-overlay:hover panel-text { opacity: 1; }
Now I have attempted to try .panel-title as well .panel-button .
Any help is greatly appreciated, all other posts shown display what I have been using. Even if we have to display an icon when .panel-text is hidden could work out.
Somwthing link this is what should happen
Link
Do it in this way.
.panel-text {
visibility: hidden;
}
.panel-overlay:hover .panel-text {
visibility: visible;
}
So for some reason nothing was working when trying to use with .panel-overlay, so trying the image wrapper did the trick. Using visibility or display will not perform correctly still. Below CSS worked out, works exactly example provided (link) except icon, will work on that later.
panel-text { opacity: 0; }
panel-mainimage-wrapper:hover .panel-text {opacity: 1; }
I have a navbar that I'm building with bootstrap based off this W3Schools example here.
When you are looking at the menu collapsed on a small screen, it looks like this:
And if you don't click off of the dropdown and expand the screen, the dropdown stays open.
Question:
Is there a way to force close a dropdown menu when you switch from one a small screen to larger one?
Why I want to do this:
For my current navbar, I wrote a media query so that when you hover over the dropdown on desktops, you see the menu. I also disabled the the top menu item so the user can't click it.
I have that hover there and I disabled the top link so users don't have to click to open or close the dropdown menu. And that works fine...until you go to a smaller screen size, click the dropdown and then expand the screen again. At that point, the dropdown is open and you have to click off of it again. I want the dropdown to close so the screen is expanded (then the user can go back to hovering over the dropdown menu).
Not sure if this is helpful, but this is the media query I wrote for the large screen/desktop behavior:
#media(min-width: 768px) {
/**Background link hover**/
.navbar .navbar-nav > li:hover:after{
width: 100%;
background: black;
}
.navbar .navbar-nav > li:after{
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.dropdown{
position: relative;
display:none;
}
.dropdown:hover .dropdown-menu {
display: block;
position: absolute;
}
.disabled-desktop-link {
pointer-events: none;
cursor: default;
}
}
You'll just want a JS event listener on the window, which fires when you resize the window.
Read into this - https://developer.mozilla.org/en-US/docs/Web/Events/resize
As you can see, you add a class open to your li.dropdown when you click on it.
So, what you you can do is to remove the class open when you resize your window.
Here is a simple way to do it :
var windowWidth = $(window).width();
$(window).resize(function() {
if (windowWidth >= 992) // the width you want
$(".dropdown").removeClass('open');
});
Here is a jsfiddle :https://jsfiddle.net/5oquf01q/3/
I'm looking for a solution for a bootstrap accordion with a button to expand the accordion, but I would like to hide this button when it is expanded.
My accordion headline is like the beginning of the text inside of the accordion, and if I have the button there it is disturbing the view.
How can I hide this button when the accordion is expanded, but visible again when the accordion is collapsed?
The problem here is, that when I click on the title, to close the accordion, then the button remains disappeared, and if I click on the title again, the accordion will expand, but the title will disappear as well. If Possible, I would like to keep the title as link.
a[data-toggle='collapse'].collapsed {
visibility: visible;
}
a[data-toggle='collapse'] {
visibility: hidden;
}
This is what I have so far:
https://jsfiddle.net/o93kwj80/2/
Thanks
How will you close the accordion if you hide the title? I made a solution for you. If you click on the title, the title will be hidden and a close icon will show up. Then click on the close icon and the title will show up and accordion will be closed and close icon will be hidden.
a[data-toggle='collapse'].collapsed .title {
display: block;
}
a[data-toggle='collapse'].collapsed .close {
display: none;
}
a[data-toggle='collapse'] .title {
display: none;
}
a[data-toggle='collapse'] .close {
display: initial;
}
.close {
float: right;
color: red;
}
Please check the updated fiddle:
https://jsfiddle.net/o93kwj80/3/