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;
}
Related
I'm working on making a Squarespace page with custom CSS to be mobile responsive. In a mobile screen, my page has a drop down menu with the different links for the page. My problem is that in certain pages (such as Music or Watch) when you click on the menu button, the drop down menu hides behind the content of the page. I know this has to do with using position: absolute, but i have not found a way to have the placement of the menu button and drop down list as I want it by using position: relative. This is my CSS for the menu:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
}
#mobileNav .wrapper {
border-bottom-style: none;
border-bottom-color: none;
}
You can view the page at richiequake.com using the password Help123. Is there another way I can have the placement of the menu button and the drop down list and have the list "push" the content of the page down so the link list is visible?
Basically, are you are missing is the z-index property. Which will place the container #mobileNav in a higher layer.
By making this change (adding z-index property to your CSS selector):
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
I can now see the menu links in all pages. You can read more about the z-index spec here.
UPDATE - To also push the content down while using absolute positioning:
As you are already using a custom class to toggle the menu links, you can use that to also toggle the content section.
Add a selector rule as following to your stylesheet:
.menu-open~section#page {
transform: translateY(355px);
}
What this will do is, when the menu-open class is in the document, the sibling section with id of page, will be pushed down 355px.
You can also add a some kind of animation if you want a smoother effect on pushing the content down, like so:
#page {
margin-top: 100px;
margin-bottom: 100px;
opacity: 1;
position: relative;
transition: transform .3s linear;
}
I just added the transition, where the .3s is the time that the transition will take.
One problem with using absolute positioning, even if you use transforms to compensate for it, is that on some devices and browser widths, the logo will overlap the navigation. Observe what the current solution renders:
Another problem is the delay between when the navigation collapses and when the text is no longer visible:
Because this is Squarespace and you don't have access to edit the underlying DOM, I would use flexbox to solve this. To do that, first get rid of this:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
And add this:
#media only screen and (max-width: 640px) {
#canvas {
display: flex;
flex-direction: column;
}
#mobileMenuLink {
order: 1;
}
#mobileNav {
order: 2;
}
#header {
order: 3;
}
#header ~ * {
order: 4;
}
}
Note that the above is not vendor-prefixed, so if you want to support older browsers, you'd correspondingly want to add vendor prefixing.
I tend to use the following SCSS #mixin for an animation effect to let users know what is interactive on my projects.
#mixin clickAnimation($opacity: 0.5, $distance: -1px, $time: 75ms) {
opacity: 1;
transition: $time ease;
cursor: pointer;
&:hover {
transform: translateY($distance);
opacity: $opacity;
}
&:active {
transform: translateY(2px);
}
}
I'll tend to use it across the site like this:
a:not(.disabled) {
#include clickAnimation();
}
Recently I've noticed a quirky issue with this.
If the user hovers the <a> element on the bottom pixel of the <a>, the <a> will transform up to -1px. When the user clicks the <a>, the :active css state will perform (in this case, translating down to 2px), but the click action will not register. So no click handlers will fire, and no links will cause redirects.
Has anyone had this issue before and know what I could do to fix it?
As requested, here is a fiddle which demonstrates the issue: https://jsfiddle.net/bf9yk0tn/
Apparently, the DOM looses track of the element since its moving from its original position and there's nothing at the time click event occurs (somehow it manages the hover though).
You can go for a workaround like this to fill the void but Im not sure if its the best solution.
a:hover::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
height: 1px;
width: 100%;
}
Here's the update jsfiddle
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 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;
}
I'm looking to show a div on click. The goal is to use pure CSS only, no jQuery.
Working FIDDLE Demo
Consider that you want something like this:
We write our markup as simple as possible. One element for container, one element for our link and one another element for popup:
<!-- [container] -->
<div class="link-with-popup">
<!-- link -->
<div class="link">CSS</div>
<!-- [popup] -->
<div class="popup">
<div class="box">CSS Description</div>
</div>
<!-- [/popup] -->
</div>
<!-- [/container] -->
Here is our layer structure in picture:
CONTAINER
Let's write CSS for our container.
.link-with-popup {
/* for visualizing */
background: yellow;
/* we need relative, because childs are absolute */
position: relative;
margin-bottom: 10px;
height: 30px;
width: 400px;
}
[!] Note that we make our container relative. Because the children will be in absolute mode.
LINK
We create our link as an absolute element from left, just as shown in the figure above.
.link {
background: blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100px;
z-index: 10;
}
POPUP
The dimention of popup element is same as the container, so we set all top, left, right, bottom properties to 0.
.popup {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: green;
z-index: 20;
}
[!] Note that z-index of popup element must be greater than link element.
.popup {
/* we won't show the popup yet */
display: none;
}
By now, we'll get this result (check it on jsFiddle):
Now we want the click for our link. This must be done with :active pseudo selector in CSS. But how we must show the poup? We have to get the next sibling element by the link. We use the + selector in CSS:
.link:active + .popup {
display: block;
}
See the result on jsFiddle. But the problem is that when user realize the mouse, the popup will disappear (as it display is set to none).
So we set the :hover rule for the popup and make it block.
.popup:hover {
display: block;
}
Check the jsFiddle demo. Now we get close enough. The only issue that the popup element, hide our link.
But it doesn't matter, because we won't set background for our popup (it will be transparent).
TEXT
For wanted text in popup element, we set this rules:
.popup .box {
position: absolute;
/* note that we make a gap from left to don't hide the link */
left: 130px;
top: 0;
right: 0;
bottom: 0;
background: #505050;
}
Check the jsFiddle demo. Now we have all things that we need.
Now it's time to make our popup element transparent (by setting the background as transparent or simply remove the background: green; rule):
.popup {
background: transparent;
}
And here is the final jsFiddle result. And if you add some extra CSS to it, it can be more stylish. Something like this that I've created.
Some important note to memorize:
In the final result, there is a gap between the link (blue one) and the popup (gray one). But the fact is that the gray element is not our popup. It's a child of popup and our popup is an 100% width and height element on the container.
Working FIDDLE Demo
Another way is to use the :target property (only works in moderns browsers).
Here's a qucik DEMO where I've hidden the div by applying opacity: 0; and the when you click the link the div changes to opacity: 1; The link and the div are matched using a hash in the url.
Here's the code from my example.
HTML
Click me
<br />
<div id="pop"></div>
CSS
#pop {
width: 100px;
height: 100px;
background: #000;
opacity: 0;
}
#pop:target {
opacity: 1;
}
There are some side effects though. The browser will jump/scroll down (not sure if it's possible to prevent this?) to the matched div and since we are using a hash in the url it will effect the browser history and, as mentioned above, it only works in modern browsers.
EDIT If you want to look into other hack/tricks for pure CSS click events, this is a good post - http://tympanus.net/codrops/2012/12/17/css-click-events/