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

zzlogan

Member
  • Posts

    60
  • Joined

  • Last visited

Reputation Activity

  1. Thanks
  2. Thanks
    zzlogan got a reaction from creedon in Keep Main Navigation underlined when viewing a Not Linked Page   
    @creedon, this works great! thank you for this! it works great and am now just copying that for the different pages that have the same thing and replacing "magazine" with "blog", and it just works.  Thank you for sharing this approach. 
  3. Like
    zzlogan reacted to creedon in Keep Main Navigation underlined when viewing a Not Linked Page   
    It may be possible to do this with CSS only but it seems to me it would be a more tortuous route. Javascript seems a better fit here.
    Add the following to Settings > Advanced > Code Injection > HEADER. The OP doesn't need to do this step as they already have jQuery installed.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER.
    <script>   $( ( ) => {        /*            begin add navigation magazine underline to magazine subpages              Version       : 0.1d0              SS Version    : 7.1              Dependancies  : jQuery              By            : Thomas Creedon < http://www.tomsWeb.consulting/ >              no user serviceable parts below              */              // bail if not magazine subpage              if ( ! location.pathname.startsWith ( '/magazine/' ) ) return;              $( '.header-nav-item [href="/magazine"]' )                .parent ( )                  .addClass ( 'header-nav-item--active' );                // end add navigation magazine underline to magazine subpages            } );        </script> Let us know how it goes.
  4. Like
    zzlogan reacted to tuanphan in Customize Newsletter button on hover   
    Hi. What is site access password?
  5. Like
    zzlogan reacted to iamdavehart in Adding a Dashed line around a Button   
    This is one of those questions where the answer should be simple, but CSS doesn't give you control over the spacing between the dots/dashes. Which means that any answer that gets you exactly what you want can become more than a little complex...
    First option here is that you can fake the border with a background-image. Look here and there's a generator someone wrote on codepen  that will help you get something you want. you can then just copy the css it outputs into your button css. there's also a lot of fancy options available here too, including animating stuff etc.
    More Control Over CSS Borders With background-image | CSS-Tricks
     
    However, you might notice that CSS actually uses a different algorithm to draw a dashed border, i.e. it will always draw L shapes at every corner and then make sure that the corners have the right dash length, which this background image approach doesn't do. 
    So if you want to be pixel perfect that makes things a little trickier too. if you want to do that you have to build a background image and then slice it up into 9 squares using the css border-image properties. it's tricky to be honest, but it can be done. 
    try this for example:
    .button-block .sqs-block-button-element { border-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAyNyIgd2lkdGg9IjI3IiBoZWlnaHQ9IjI3Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48cGF0aCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIGQ9Ik0gMCAwIEwgNiAwIDYgMyAzIDMgMyA2IDAgNiBaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PHBhdGggIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgZD0iTSAwIDIxIEwgMCAyNyA2IDI3IDYgMjQgMyAyNCAzIDIxIFoiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cGF0aCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIGQ9Ik0gMjcgMjEgTCAyNyAyNyAyMSAyNyAyMSAyNCAyNCAyNCAyNCAyMSBaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PHBhdGggc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIiBkPSJNIDIxIDAgTCAyNyAwIDI3IDYgMjQgNiAyNCAzIDIxIDMgWiIgZmlsbD0iYmxhY2siIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgeD0iMTAuNSIgeT0iMCIgd2lkdGg9IjYiIGhlaWdodD0iMyIgZmlsbD0iYmxhY2siIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgeD0iMTAuNSIgeT0iMjQiIHdpZHRoPSI2IiBoZWlnaHQ9IjMiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cmVjdCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIHg9IjAiIHk9IjEwLjUiIHdpZHRoPSIzIiBoZWlnaHQ9IjYiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cmVjdCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIHg9IjI0IiB5PSIxMC41IiB3aWR0aD0iMyIgaGVpZ2h0PSI2IiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PC9zdmc+") 6 / 8px / 10px round; } I generated the SVG image its using as a background, but haven't made it up as a reusable codepen yet to allow you to generate one.
    I think you'll be fine with the first option, but when I get time I'll make up the border-image one as a codepen and post the answer here
  6. Like
    zzlogan reacted to bangank36 in Create a fixed side navigation that shows your current scrolling page location   
    Í í
     
    It called same-page navigation, you can find more info about it here
    Creating same-page links in Squarespace ▪️ Launch the Damn Thing!
  7. Like
    zzlogan reacted to WillMyers in Click a button/hyperlink and have the page respond with content (txt, imgs, etc)   
    Hey Zack, just responded to your email re:Image above the tabs. Should be possible, but you'll need to use a :before pseudo-selector.  I'd definitely recommend my Tabs (For Sections) over the Secondary Nav for your other question though. The secondary nav is meant to be more similar to a site navigation rather than a page navigation. 
  8. Like
    zzlogan reacted to creedon in Create a second "navigation bar" within a specific page section   
    Sounds like tabs to me.
    You might find the Tabs (For Block Content) of use.
  9. Thanks
    zzlogan reacted to bangank36 in Click a button/hyperlink and have the page respond with content (txt, imgs, etc)   
    It's call tabs, you can check one of these tuts do achieve it
    Simple Tab Sections in Squarespace 7.0 & 7.1 | Will Myers | Get Better At Squarespace (will-myers.com)
  10. Like
    zzlogan got a reaction from bangank36 in Click a button/hyperlink and have the page respond with content (txt, imgs, etc)   
    Site URL: https://pomegranate-badger-p3wd.squarespace.com/config/
    Is it possible to click a button/hyperlink and then the web page responds with content underneath it? 
     
     


  11. Like
  12. Like
    zzlogan reacted to ErikaT in For the header of the mobile view, how can you show 3 things: hamburger menu, logo and a button?   
    Hi,
    Sure, with the below (enclose the below in your 1024px media query if you want the rounded effect etc on mobiles/tablets only). You may need to adjust your logo padding slightly again after this 🙂
    .header-actions-action--cta a {
    border-radius: 5px;
    padding: 0.8em 0.8em !important;
    }
  13. Like
    zzlogan reacted to ErikaT in For the header of the mobile view, how can you show 3 things: hamburger menu, logo and a button?   
    Hi,
    I edited one of @tuanphan responses to a similar query, with some tweaks for your setup:. Tuan is the expert, I'm still learning 🙂
    @media screen and (max-width:1024px) {
    /* show button */
    .header-actions {
        display: block !important;
    }
    .header .header-actions-action--cta {
        display: block;
              width: 10% !important;
    }
    /* logo width */
    .header-title-nav-wrapper {
        flex: 50% !important;
    }
    }

    .header  .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title .header-mobile-logo {
        padding-right: 0px;
        padding-left: 10px;
        }
×
×
  • Create New...