I have a store https://firefits-com.myshopify.com and Fashe colorlib theme is installed.
Issue
The product name is clickable and redirects me to the product detail page but the images are unclickable and do nothing when i hove mouse to it.
What I want
I want the product images that clickable and redirect me to product page as the product name do.
I have searched a lot on Shopify forums, their e-commerce university and theme help but none of them help me.
Your CSS is making things difficult. The grey overlay is in front of the go to page link wrapping the image so the link is unclickable.
Adding something like this your assets/custom.css stylesheet starts to address the issue but you have a bunch more things to do so that the overlay functions the way you want it to.
.block2-img.wrap-pic-w {
width: 100%;
height: 0;
padding-top: 133%;
}
.block2-img a {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: transparent;
margin: 0;
}
Related
I have a div, that has full width (100vw) and used a translate in order to place it centered. This is because it’s parent has no full width. If I now add a child with a background image and background-attachment: fixed;, this background image is misplaced in Safari on macOS.
It seems to me that the background image is placed as if the translate on its parent is not active (and thus shows only the right half of the image, since the left part is hidden.
.alignfull {
left: 50%;
max-width: none;
position: relative;
transform: translate(-50%);
width: 100vw;
}
.background {
background: url("https://via.placeholder.com/1800x800") fixed center center / cover;
height: 400px;
width: 100%;
}
<div class="alignfull">
<div class="background">
Test
</div>
</div>
I already tried to change many things but don’t get it working. It seems to be a bug in Safari, but hopefully anyone has an idea how to fix it without waiting for a fix from Apple.
Since the .alignfull is used in rather many places, it’s currently no option to change its CSS.
HELP ME please.
On my Squarespace website I would like to duplicate a portfolio entry and retain the design settings of it. In particular, the background image. The portfolio entry “2050/1” has been setup correctly using code. There is an artwork background that runs behind the portfolio gallery and the footer. When I click ‘duplicate’ in the settings for this entry it creates a new portfolio entry but it has a white background, see “2050/1 (copy)”. Is there a way to duplicate the page, and many more pages, without having to individually add code? Please refer to links attached.
https://www.regardsfromyourfuture.com/future-paintings/project-one-44zcm-57lgb-6glfy-p2f7c-nbdk9-76lc2-zh5z9
https://www.regardsfromyourfuture.com/future-paintings/project-one-44zcm-57lgb-6glfy-p2f7c-nbdk9-76lc2-zh5z9-3pcl8
Thanks!
The following CSS, added via Custom CSS / CSS Editor will achieve that.
.collection-60b8480265d7df4bcf8f97ed .page-section:first-child .section-background:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
transform: scale(100%);
background-image: url(https://images.squarespace-cdn.com/content/v1/601a2e3ab7c076212fdf7cc4/1627276381665-TKPRGQK0WMFOD4SMWKS0/Paintings_tall+test.jpg?format=2500w);
}
.collection-60b8480265d7df4bcf8f97ed .page-section:last-child .section-background:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: absolute;
background-attachment: fixed;
transform: scale(100%);
background-image: url(https://images.squarespace-cdn.com/content/v1/601a2e3ab7c076212fdf7cc4/1627276381665-TKPRGQK0WMFOD4SMWKS0/Paintings_tall+test.jpg?format=2500w);
}
Note that the URL that is used is the image URL to the image that you uploaded as the background image to the section in the initial post. Instead, you could upload the image via the "Manage Custom Files" option, and then use the URL to that image instead.
See this image
In this website i need to make header sticky Is there any way to make that sticky. I had tried this code. but header layer goes behind the all page content and not working properly even navigation button not clickable. please help me.thanks in advance.
.site-header-style-2 #header {
padding: 0;
position: fixed;
width: 100%;
top: 0;
}
I have a client that wants a header like on this site http://www.solewood.com/
I have found a few questions here but they are geared only for a certain element of the header. Here is the site I am working on http://treestyle.com/ The password is vewghu
They are both shopify sites. Any help would be greatly appreciated.
If you inspect the solewoood website you can get an idea of how they've implemented the header.
When the page is at the top, there is this CSS for the header div:
<div class="header">
.header {
position: fixed;
transition: all 500ms ease 0s;
width: 100%;
z-index: 1000;
}
And when you scroll down, the .header_bar CSS class is added to the div as well:
<div class="header header_bar">
.header_bar {
background-color: #FFFFFF;
border-bottom: 1px solid #E5E5E5;
}
.header {
position: fixed;
transition: all 500ms ease 0s;
width: 100%;
z-index: 1000;
}
There are a few other things that are also changed when the user scrolls down from the top (logo, text colour, etc.), but you get the idea.
If you are unsure how to detect if the user is at the top of the page, see here.
EDIT:
In response to your comment, try using jQuery's .toggleClass() with 2 parameters.
For example:
$(window).scroll(function(e){
$el = $('.header');
$el.toggleClass('header_bar', $(this).scrollTop() > 0);
});
This shows it quite nicely: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_shrink_header_scroll
I used this technique to turn the background-color to white on scroll, then back to transparent when back at top.
And if you wanted to completely swap out headers. You could duplicate the headers, then use this to turn display on and off for those.
I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.
In your CSS, add
position: fixed;
to your header element. It's just that simple, really.
And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.
If you want to make it sticky when it's scroll down to a certain point then you can use this function:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
And sticky class:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
You can use this plugin and it has some useful options
jQuery Sticky Header
CSS already gives you the answer. Try this out
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.
If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following:
Just create a navbar like this one:
<nav class="zone blue sticky">
<ul class="main-nav">
<li>About</li>
<li>Products</li>
<li>Our Team</li>
<li class="push">Contact</li>
</ul>
</nav>
Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you.
On the CSS add the following to create the sticky; first I am gonna start with the zone tag
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
now with the sticky tag
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen.
And now the color to make our navbar blue
.blue {
background: #7abcff;
You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.
Try This
Add this style to the corresponding
style="position: fixed; width: -webkit-fill-available"
OR
<style>
.className{
position: fixed;
width: -webkit-fill-available;
}
</style>