Jump to content

Jeffrey_Leavitt

Member
  • Posts

    15
  • Joined

  • Last visited

Everything posted by Jeffrey_Leavitt

  1. Last night I reverted it back to the w3schools list view that you originally shared, because the code block was not allowing me to adjust the search bar in a way that looked good on mobile view. Is there an alternative way I can use the w3schools approach, but perhaps add additional custom css, such as #myUL { /* Other CSS properties */ display: none; /* Hide the list by default */ }, but then adjust the JS in the Header of the Code Injection to allow the list to appear when the box is clicked? Again, I appreciate your help. I have sent you coffee money for your assistance.
  2. I appreciate your help. I removed the custom css and code injection you had previously given. I added this code to the code block. It seems to be responding in the same way it was previoulsy, meaning that the boxes showing "Phoenix Metro" and "Raleigh Metro" are always showing, and do not hide until I click into the search box.
  3. The list view stays open. I added some custom css using ChatGPT (as I don't know css, html, or js myself). But whenever I would get the list to disappear and appear only on my click into the search bar, I couldn't get the list click to navigate to the URL I defined in the Code block. But when I do not adjust the code, and use exactly as w3schools showed, then it will navigate to the URL. What code to I need to add so that I can get the list view to hide unless I actually click on the search bar, but still honor the URL redirects from the code block?
  4. Hi. The link associated with this post is currently not linked to my site. I am rebuilding the home page, which I will then transition into my site once I feel it is complete. The page is not locked. I have customized the look of the search bar with CSS. However, I can't make it search the type of information I want. I am not building a 'product' or a 'portfolio' or some other collection. Instead, I am building a site that needs to allow a user to search a location. I want to start by making a list of the 50 united states by name. In time, I will even make it possible for someone to search by metropolitan area, and then eventually by city and neighborhood. How do I make the search so it can point to these locations from a list view (or even a db)? You can use the Zillow homepage search bar as a reference for what I am hoping to do (but my version can be a 'dumber' simpler version to begin). Thanks,
  5. @creedon Thanks! I really appreciate it! @tuanphan was able to help me change the color of the nav menu line. To respect his/her work, I will let them decide to post the code to this post for others to see.
  6. @creedon Thanks! That moved the second button! I sent you a donation as well via your site. Few more questions. I removed .header-menu-nav-list { padding-top: 65rem } But I am not keen on removing the sub-nav. Having the socials on the top navbar by themselves is a request of my client. I would like to have the socials stacked horizontally, instead of vertically, in the menu overlay of the mobile header. 1. Are you able to help me with code to do this? 2. Will doing the horizontal stack also help the menu from falling behind the logo? 3. Additionally, with the buttons in the header, what would be the css to change the color, size of the buttons, and size of the font (preferably so that the font and button sizes may change as the screen changes size, but I realize this request risks me becoming a "choosing beggar", so I will take what I can get.). 4. Is there a way to make the menu bar of the desktop view a different color than white? I would like for the section where the logo and two buttons are to remain a white background, but I would like to change the menu line to be a darker color, with the menu links having a white text color.
  7. @creedon I followed your instructions. Adding the button worked. My site is riptidewashing.com. A few questions: 1. On the menu overlay of the mobile view, the two buttons are off the screen. How do I move them up, but also prevent the links menu from moving behind the logo? 2. Is it possible to get the (919) 630-9245 button on the DESKTOP view to be on the opposite side of the logo, with both the (919) 630-9245 button and "Get in touch" button equidistant between the logo and screen edge? Meaning as the screen gets smaller or bigger, the (919) 630-9245 button remains in the center of the space between the logo and the left side of the screen while the "Get in touch" button remains in the center of the space between the logo and the right side of the screen.
  8. @tuanphan Yes. I followed instructions to get a second button in that spot. But it did not scale well when the screen size changed. I need to have a second button in the spot you highlighted that will adjust to be in the same relative location compared to the other elements as the screen size changes.
  9. Hi @jacauschi23 Thanks for imparting your knowledge here. My site is: riptidewashing.com I had originally added the css as well as header and footer code injector code that you provided to Desabas on November 9 2020 above. The code worked, but I since removed it. I am trying to get the main header button and the subsequent header button to adjust their position on the page relative to the header size, rather than to each other. For example, I want one button to be on the left of the centered logo, halfway between the logo's center the left-side screen. I want the other button to be on the right side of the logo, halfway between the logo's center the right-side screen. As desktop sizes change, I want the buttons to remain centered to the logo and its relative side of the screen. The code above did not do this. Are you able to help me? Thanks!
  10. @Cristina_Rosebud I just played around with ChatGPT until it told me what to do. I can show you my code, but I can't comment beyond that, as I don't know how to code, so it is foreign to me. Hopefully this helps though. The highlighted section is what it had me add. /* CSS FOR TABLET */ @media only screen and (min-width: 641px) and (max-width: 949px){ /* Start Insert Code for Tablet*/ // Header h1 h1 {font-size:2.1rem !important} // Header h2 h2 {font-size:1.9rem!important} // Header h4 h4 {font-size:2.5rem !important} // Header h3 h3 {font-size:1.5rem !important} /* Header h4 */ .list-section-title p { font-size: 2.2rem !important; font-family: 'DMSerifDisplay-Regular', serif; font-weight: normal; } // Paragraph p {font-size:1.25rem !important} /* End Insert Code for Tablet */ } /* CSS FOR MOBILE */ @media only screen and (max-width: 640px) { /* Start Insert Code for Mobile*/ // Header h1 h1 {font-size:1.8rem !important} // Header h2 h2 {font-size:1.5rem!important} // Header h3 h3 {font-size:1.25rem !important} // Header h4 h4 {font-size:2rem !important} // Paragraph p {font-size:1rem !important} /* Header h4 */ .list-section-title p { font-size: 1.8rem !important; font-family: 'DMSerifDisplay-Regular', serif; font-weight: normal; } /* End Insert Code for Mobile*/ } @font-face { font-family: 'DMSerifDisplay-Regular'; src: url('https://static1.squarespace.com/static/641f2453b1e276423f86b6de/t/6420e59ac95fa64f3a7b3c32/1679877530490/DMSerifDisplay-Regular.ttf'); } h1 {font-family: 'DMSerifDisplay-Regular';} h2 {font-family: 'DMSerifDisplay-Regular';} h3 {font-family: 'DMSerifDisplay-Regular';} h4 {font-family: 'DMSerifDisplay-Regular';} .list-section-title p { font-size: 3rem; font-family: 'DMSerifDisplay-Regular', serif; font-weight: normal; }
  11. Th@disR@d is the password to view the site if needed.
  12. Hi. I have changed the css so that 1. The H1, H2, H3 sizes are different on mobile than on desktop; 2. The H1, H2, H3 have a specific font that I uploaded. These changes are manifested throughout the site. However, the template I chose had an element (I don't know the proper term) already created. When I am in "edit" mode, it gives me the option to "Edit Content" and then I can edit "Element", "Content", "Design". I checked, and "Title" element is H3. However, It does not honor the CSS changes I made above. I cannot figure out how to get this title to honor my CSS changes. In the screenshots below, you can see the different "CSS" changes I have made. You can also see the "Locally Owned & Operated" Header is honoring the CSS, but he "Our Services" is completely ignoring. I changed the H3 to 5rem just to prove a point that it is not honoring the css.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.