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

Search the Community

Showing results for tags 'active'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 2 results

  1. I'm looking to create an accordion that will expand/hide content when the user clicks on 1 of 6 icons in a row. The icons serve as buttons essentially, with an active, hover and inactive state. I'm using the Brine template. Here are the functions I need: The icons have a text label below them (likely H3 text). Icons have an active, hover, and inactive state. The accordion will automatically hide whatever active content is showing when the user clicks a different icon. The content that would show/hide below would include an image with a header and text to the side of it for each icon. I want the icons to be in a single row until the screen size gets to mobile widths so that the content that shows on the user's click always falls below the row of icons. This means that as the screen width narrows, the icons and text likely need to scale down so they fit in a single row on tablet screen widths. On mobile, I want the icons and text to stack and have the content be revealed below each icon (similar to the example image in the following topic, except the + icon would be my icons: I'm trying to create all of the various content blocks so a coder can go in and create the jquery to enable all the behaviors, but I need to know what kind of content blocks to use. If I just use image blocks with text blocks below them for each icon, I don't think I can keep the icons in a single row or scale things according to the screen width. If I use a gallery or summary block, I don't know how the active/hover/inactive states could be implemented. If anyone who has done something similar can advise me on the content blocks to use to get all of the above functionality, that would be very helpful. For context, the page I'm trying to implement this on is here: https://www.superiorfresh.com/organic-greens. Under the header "Good for You, Good for the Planet" there are 6 images with a header/paragraph below them. I would replace those with the row of icons, and then clicking would reveal the image and paragraph below. I've also attached some images of what I'm hoping it will look like when complete.
  2. I'm having trouble with changing the active & hover color for a secondary navigation folder. For the primary navigation the active/hover color is red - hsla(0, 82%, 42%, 0.77) but the secondary navigation style is a button which is red with white text. I managed to correct the active color with the code below but I would still like the hover color to be red for the drop down folder items. .Header-nav--secondary .Header-nav-folder-title--active { color: hsl(0, 0%, 100%) !important; } Here is the website: https://gardenia-oboe-ap5s.squarespace.com PW: viewsite Any help is appreciated!
×
×
  • Create New...