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

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.

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?

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.

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?

Thank you so much! It worked flawlessly!

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?

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/