dipanjanpal

Thank you so much for the code @tuanphan

I have implemented it and noticed the following issues: 

It does not push the header like it does in the site zizka.ca and for that, one can click on the hamburger and then scroll on the homepage without closing the hamburger. It looks a bit cumbersome. Ideally, when the mobile menu is open, I want a user to either click on the X icon or part of the visible homepage for the menu to close. 

Also, it slides with a white screen first and then fills it up by black screen when I click on the hamburger - the transition doesn't look smooth.

Can you help me out with these? Thank you so much! 

Link to the screen record video - https://www.icloud.com/photos/#0587cd-VmlVr4UteqXFYOdXvQ

9 hours ago, tuanphan said:

You need scroll screen to right to see burger..

Use this code to Custom CSS to make menu slide from right

@media screen and (max-width: 768px) {
.header-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(400px);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.header--menu-open .header-menu {
     transform: translateX(0);
}
.header-menu-nav-folder, .header-menu-nav-item a, .header--menu-open .header-menu .header-menu-nav-list,
.header-menu-actions, .header-menu-cta {
    transition: unset !important;
    transform: unset !important;
}}

 

Thank you, I have done that.

I was trying to shorten the window size gradually from my PC and noticed there's one glitch after a breakpoint. Please see the screenshot for details.

1. This slides the menu from the right very well, but like the website zizka.ca I would like to push my homescreen to the left whenever someone opens the burger. 

2. Secondly, I want the fonts sizes of the mobile menu same as that website, with little + icons before the expandable menu items. 

3. Also, I would want the social links at the bottom of the screen whenever someone opens up the mobile menu. I would first want all my menu items left aligned, followed by that CTA button of Shop Prints. And the social icons get to the very bottom. 

I understand it's a lot to ask from you, so please free to answer me at your own pace. As always, I appreciate your help a lot. 

2 hours ago, Web_Solutions said:

Here is the code

.blog-item-author-profile-wrapper {
    background: rgba(0,0,0,.04);
    padding: 20px 30px 30px !important;
    .author-name {
        font-size: 22px !important;
    }
    .author-bio p {
        font-size: 16px !important;
        font-weight: 400 !important;
    }
    .author-avatar {
        width: 60px !important;
        height: 60px !important;
    }
    .author-avatar img {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
    }
}
@media only screen and (min-width: 691px) {
    .blog-item-author-profile-wrapper {
        padding-left: 140px !important;
        padding-top: 30px !important;
        align-items: flex-start !important;
        position: relative !important;
    }
    .blog-item-author-profile-wrapper *{
        text-align: left !important;
    }
    .author-name {
        margin-top: 0 !important;
    }
    .blog-item-author-profile-wrapper .author-avatar {
        position: absolute !important;
        left: 30px !important;
        top: 50% !important;
        transform: translateY(-50%);
        margin: 0 !important;
        width: 80px !important;
        height: 80px !important;
    }
}

 

Thank you so much for your solution!

Is there any way to add "Written by" before my name and make my name in bold letters?

Also, how can I add the social icons in the bottom?

8 hours ago, tuanphan said:

To achieve same, it require a lot of CSS code, so I will help you deal with each problem one by one, once I finish one problem, I will move on to the next problem.

Also, current I don't see Burger Menu. Can you check again?

 

Thank you, I am ready to deal with this on a problem by problem basis with you. 

Not sure why you don't see the burger menu - it should be present in all devices. 

Updated my site URL to this - https://www.dipanjanpal.com/ 

Can you check?


Also, I applied the following codes to the burger to make it smaller and all - not sure if it affected display on certain screens. Pasting the CSS below - 
 

/* Burger position */
.burger-box {
    right: -5vw;
}

// hamburger menu customization

body:not(.header--menu-open) .burger-inner.header-menu-icon-tripleLineHamburger .top-bun {
    transform: translatey(-6px);
}

body:not(.header--menu-open) .burger-inner.header-menu-icon-tripleLineHamburger .bottom-bun {
    transform: translatey(6px);
}

body:not(.header--menu-open) .burger-inner>div {
    width: 60% !important;
  align: center;
}

button.header-burger-btn.burger {
    padding: 0;
}

/*MOVING THE MOBILE MENU BUTTON IN SQUARESPACE 7.1 CLOSER TO THE LINKS*/
.header-menu-nav-folder-content {
 flex-grow: 0;
}

If there is any problem in the code, and if you want me to remove certain parts or all parts of it, please let me know. 

Thanks a lot for your help. 

8 hours ago, tuanphan said:

Add this code to Website Tools (under Not Linked) > Custom CSS

[class*="type-products"].view-item {
	/* change logo to black */
    header#header img {
        filter: brightness(1) invert(1);
        -webkit-filter: brightness(1) invert(1);
    }
    /* change nav to black */
    div.header-nav-item>a {
        color: black !important;
    }
    /* change burger to black */
    div.burger-inner>div {
        background-color: black !important;
    }
}
[class*="type-products"].view-item.header--menu-open div.burger-inner>div {
    background-color: white !important;
}

 

Thank you @tuanphan, that worked smooth! 

One follow up question: since it inverted the color of the logo, there is a red dot in my logo which became black. I have a separate dark logo already, is there any way to include that (by uploading separately) in the logo so that the red dot stays as it is? 

9 hours ago, Web_Solutions said:

 

add this code on Custom CSS section.

@media screen and (max-width: 767px) {
    .view-list .grid-item .grid-image-wrapper {
        padding-bottom: 0 !important;
        height: auto !important;
    }
    .view-list .grid-item .grid-image-wrapper img:first-child {
        position: relative !important
    }
}

 

Thank you so much! It worked flawlessly! 

6 hours ago, Web_Solutions said:

There has two images. One image width is longer than height and one image width smaller than height. That is the problem.

True, but I don't mind if the second image gets cropped a little bit. The second image is the preview of how the print will look like in someone's house. The first image is the product itself.

In ideal situation, I'd want the first image to fill width, and the second image to show with white bars on top and bottom, but I'm fine with the second image getting cropped a little bit for the first one to be portrait. Will that be possible?

20 minutes ago, Web_Solutions said:

Its for your image sizing. You should use the same size image. If you add code then it will look like the attached image. Is it ok?

I sell both horizontal and vertical prints so I can't have same size across all the products. 

Is there no way for it to look like this in the attached image? I have all the vertical images with a special tag so maybe there would be a way to fill width in mobile only for those tagged images? 

Thank you so much @Web_Solutions, worked like a charm. 

Can you also help me out with one more thing? In mobile view, the vertical products I have are not filling the entire screen. How do I fix this? 

Link - https://bluebird-tuba-waaw.squarespace.com/prints

Hello, my current author profile looks kinda like this (attached - Dipanjan Pal)

I want it style it better to make it look like my friend Jeroen (attached below) 

 How can I do that with CSS? 

Link to one of my blog post - https://bluebird-tuba-waaw.squarespace.com/blog/5lgwk48at7h6pe6rm2omsnco6lgyqc
Link to Jeroen's blog post - https://jvn.photo/black-friday-weekend-2023/

Also, I'd like the tags to be look like buttons on hover like Jeroen's website. Can anyone please also help me with that?

Hi, in my product details page, I see that there is a lot of vertical padding between the product variants buttons, and also between the top product variant and the price. (marked with red in the screenshot)

How do I decrease/adjust these width according my own preference? Thanks a lot in advance!

Product link - https://bluebird-tuba-waaw.squarespace.com/prints/p/coexistence 

Hi everyone, I want to change the colour of my logo (have a separate image for a black logo) and the colour of the top menu navigation items (Home, Portfolio, Workshop etc.) on all the product details page from white to black. Note that I don't want it to affect my product list page when someone opens it. 

I also want the same effect on mobile -> the hamburger icon for phone for all the pages is white, but it should be black for the PDP pages. 

Can you please tell me how to do it with CSS? I tried a few codes from the forum but none of them seemed to work.

URL: https://bluebird-tuba-waaw.squarespace.com/

Product page example: https://bluebird-tuba-waaw.squarespace.com/prints/p/coexistence

@tuanphan Can you please help me out with this?

Hi, I want to change the mobile menu of my site. I want it to look exactly like mobile menu of this website https://www.zizka.ca/ (should open from right, not filling up the screen, same font, same + icon before the expandable menu items, and capitalize throughout) and additional social icons, but aligned at the bottom of the mobile menu, not over the CTA button.

Can you please tell me what codes do I need to add? I'm currently using some codes to make the hamburger icon size smaller but it slightly messes up the position of the X as they are not perfectly aligned. Please let me know, many thanks! 

My site link: https://bluebird-tuba-waaw.squarespace.com/