Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

BrookeP

Circle Member
  • Content Count

    27
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Site URL: https://www.michellegonzalezphotos.com/ Implemented a custom mobile navigation menu, and for some reason on mobile screens, a fixed header is appearing OVER the mobile navigation menu. Been racking my brain for hours on what could be causing this issue. Doesn't appear in the mobile screen in the Squarespace backend, but does when testing on actual phone. Which makes it difficult to target the element itself in the Inspect window. Reckon I may need to adjust the z-index of an element? Not sure if I have another element that could be causing the issue, but I've looked at everything and can't seem to figure this out. Any help would be greatly appreciated! Also happy to provide any other info that you feel would be helpful. Code used to implement a fixed header & to change on scroll here: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(window).on("scroll", function() { if($(window).scrollTop() > 400) { $(".Header").addClass("on-scroll"); } else { $(".Header").removeClass("on-scroll"); } }); </script> .Header{ background-color: transparent; width: 100%; position: fixed!important; transition: 0.2s all linear; -webkit-transition:background-color .4s; -moz-transition:background-color .4s; transition:background-color .4s; z-index: 999; } .on-scroll{ background-color: #e6dcd1!important; z-index: 999; } .on-scroll .Header-nav-item{ color: #000!important; } .Header-inner--bottom { padding-bottom: 20px; } .on-scroll .Header-branding-logo { visibility: hidden; } .on-scroll .Header-branding { background-image: url(https://static1.squarespace.com/static/5a47c003c027d80d1f85c73d/t/5e88a47dc8efd76b478354ac/1586013309515/primary-logo-black.png); background-size: contain; background-repeat: no-repeat; background-position: center center; transition: .4s; width: 220px; } Code used for custom mobile navigation menu here: ///Mobile Overlay/// //mobile .Mobile-overlay-nav-item { text-align: center; } .Mobile-overlay-menu { background-image: url(https://static1.squarespace.com/static/5a47c003c027d80d1f85c73d/t/5e91ced3cfe71128e10e1bcb/1586613973454/Venice+Italy+Wedding+Anniversary+Photography+Session-+Destination+Italy+Wedding+Photographer+-+Michelle+Gonzalez+Photography+-109+%281%29.jpg); background-color: #f5deb3; background-position: center; background-repeat: no-repeat; background-size: cover; width: 100vw !important; } .Mobile-overlay-close { z-index: 999; background:transparent !important; } .Mobile-overlay-nav--primary { padding-top:60px; } .mobileLogo { width: 190px; margin-top: -20px; } //mobile branding logo// @media only screen and (max-width: 640px) { .Mobile-bar-branding { -webkit-filter: invert(100%) !important; filter: invert(100%) !important; filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); }} //Add this to disable logo on desktop @media screen and (min-width:760px) { .mobileLogo { display:none; } .Header-nav--primary .Header-nav-item:nth-child(1) { display:none !important; } } .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child { padding-top: 0em !important; } .Mobile-overlay-folder-item { text-align: center !important; padding-top:20px; font-family: 'Danmark Medium';//change as necessary } .Mobile-overlay-folder { padding-top:100px; } .Mobile-overlay-folder-item--toggle-label { font-family: 'Danmark Medium'; } //Add this to disable logo on desktop @media screen and (min-width:760px) { .mobileLogo { display:none; } .Header-nav--primary .Header-nav-item:nth-child(1) { display:none !important; } } .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child { padding-top: 0em !important; } .Mobile-overlay-folder-item { text-align: center !important; padding-top:20px; font-family: 'Danmark Medium';//change as necessary } .Mobile-overlay-folder { padding-top:100px; } .Mobile-overlay-folder-item--toggle-label { font-family: 'Danmark Medium'; } The image of what the issue looks like on a mobile screen is attached. I've also attached a screen recording of the issue. Hopefully someone can help me narrow this down! RPReplay_Final1586874343 2.MP4
  2. It seems as though they are two separate index pages placed side-by-side instead of stacked. Is this possible to do through some coding?
  3. Looking for a way to create a similar effect as the home page on the website below. I've been experimenting with a few different ways to achieve this and alas, no winners. My brain is coded out. Amber Ladd Home I know this is achieved using a split screen Index Gallery set to slideshow. However, I'm having issues achieving the text to the side of the slideshow on the other half of the screen as shown on the above website. I really like this look for a Home landing page and would like to execute something similar for my own website below. Any help is much appreciated!! Quiddity Design Co Password: Quiddity The landing page it directs you to after entering the password is the page that I would like to implement this design on. @Paul2009 you've been such a wiz on helping me out with some of my questions, while also educating me and it's been fantastic - any insights on how to achieve this style? Thank you!
  4. @tuanphan THANK YOU! Worked brilliantly - you rock!
  5. I am using a custom font for my client's website, and incorporated it into the website using a Code Block. However, I am having issues with a ton of spacing around each code block and I can't figure out how to get rid of it! It's causing some spacing issues on the desktop site, but especially on mobile - creating huge gaps between the code blocks and other text/image blocks, making it look not so great. See screenshots below (the scripted text is the code block). Desktop is the first image, and mobile is the second. I've tried a few different codes targeting the padding of the code blocks, but nothing seems to do the trick to fix this issue. Any CSS or HTML suggestions?? Greatly appreciated!!! Website: https://www.wildlyyoursweddings.com/
  6. Is there a way to remove padding inside of a code block? I've inserted an image using a Code block and want the block to fit snug around the image itself, but I'm getting an extra padding on all sides. Here is a link to the site for reference Password: weddings This is the code I currently tried to use: .sqs-block-code .sqs-block-content { padding-top: 0px; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; } Any help would be much appreciated!
  7. I have implemented custom code to float an index section between two other sections in the Brine template. This is on a few different index pages, but specifically for the sake of this example, we'll look at the "Journal" page, and the floating section is titled "Journal Float" (creative, I know). I added a plain white banner background to give it some oomph, but am curious if there is anyway to add a border around the entire floating section to help it stand out a bit more using CSS. Website Password: weddings Page: Journal, floating section at the top titled "Journal Float" Any ideas on best way to go about this?
  8. @Paul2009 thank you so much Paul! This is a game changer for adding some more customized touches to my websites & implementing more branding marks. You rock!!
  9. @Paul2009 thank you so much Paul! This is a game changer for adding some more customized touches to my websites & implementing more branding marks. You rock!!
  10. @Paul2009 gotcha. Thanks! I've created a new section with the image. What would be the code then that I write to target the image and move it to the desired placement?
  11. @Paul2009 gotcha. Thanks! I've created a new section with the image. What would be the code then that I write to target the image and move it to the desired placement?
  12. @Paul2009 thanks so much! Still very much a work in progress. Yes! So how did you go about doing that? I would create a new page within the index JUST containing that logo image? And then what CSS code specifically did you use to make it look like that? Seeing the code itself or a step-by-step would be super helpful! Thanks again Paul! You da bomb.
  13. @Paul2009 thanks so much! Still very much a work in progress. Yes! So how did you go about doing that? I would create a new page within the index JUST containing that logo image? And then what CSS code specifically did you use to make it look like that? Seeing the code itself or a step-by-step would be super helpful! Thanks again Paul! You da bomb.
  14. @Paul2009 thank you so much Paul! So using this example, let's say I wanted to implement this technique on the website below. I have inserted an image (see below) using a code block under the "Home Page Reviews" section within the Home Index. I'm a visual person, so I thought using an example would help me understand! Test Website Password: wedding
  15. @Paul2009 thank you so much Paul! So using this example, let's say I wanted to implement this technique on the website below. I have inserted an image (see below) using a code block under the "Home Page Reviews" section within the Home Index. I'm a visual person, so I thought using an example would help me understand! Test Website Password: wedding
×
×
  • Create New...