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

Search the Community

Showing results for tags 'header'.



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 277 results

  1. I just can't seem to make this work! All I am trying to do is make the whole header area (Announcement Bar + Header (Logo, Navigation, Shopping Cart, etc.) stay visible at the top of each page. HELP Site is www.justgoodjuju.com
  2. Hi guys, I'm trying to create a button on my mobile site's header. I've created a button on desktop and inside the mobile menu using styling of the 2nd navigation element. Now I'd like to have this button out on the mobile header. Thank you!
  3. Hey! Wondering if I could get some code help on the site I design. https://www.zdigital.com/ I want to fix the nav to the top of the page when a user scrolls past the header, turning into a new color. #333333 Could not get the code in other posts to work for me on my site. I already have the following in CSS for other things. Not sure if I would need to change any of It if I'd need to body { text-align: justify }; p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; }; .collection-5e150xxxxx .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper { padding: 120px 0 80px; }; .sqs-block.form-block .form-wrapper input[type=submit], { background-color:#044971; color:#fff} .sqs-block.form-block .form-wrapper:hover input[type=submit], { background-color:#066399;color:#FFF };
  4. Hi everyone, I am just learning about coding, and would like to ask you few questions. This website was using forte template and modified it http://www.aifny.com/ Is there any possibility to increase the space from the top of the page and title/navigation bar? Also still trying to find a code to remove background for the arrows but few codes that I used doesn't work... And the last question is how to dim slightly entire page when you drag mouse on the navigation bar? Any help is appreciated.
  5. Hi, This is my clients logo - They want the orange line in the logo to extent out into the header to meet the menu, like this It cant be done as an image without creating problems when scaling and in mobile. Is it possible? We're using version 7.1, Clarkson. Thank you. Any advice, appreciated.
  6. I would like to find the code to stop the logo from scrolling along with the site on the Tudor template. Either that or put a white background behind it. Any suggestions? Thanks so much! :)
  7. Hi all, Looking for some help in trying to do a fixed header on the Mentor template. Any help is much appreciated! Thanks!
  8. Hello, I'd like to use a "boxed-in" design for my header items but can't seem to find the way to make the vertical dividers long enough to bleed with the browser nav bar above and the horizontal line below since the padding value is on the parent. Does anybody have a simple solution for this? My site, running on 7.1 https://pelican-chiton-xwy4.squarespace.com/ Best, Xavier
  9. Hello all! I'm currently in the process of designing my portfolio website and I've noted that there is too much of a gap between the header and portolfio on my home page. I'd like to reduce the gap between the portfolio and the header. I've gone through all the settings but they all seem to counter act each other. Having spoken to the Customer Support team, they said that I'd need to have some coding to reduce this gap. I'm pretty new to this all so was wondering if anyone had any help in what coding I can insert to reduce the gap? My apologies if it's very simple - I'm fairly new to all this! I'm using the Novo template. Thanks for your help! Jacob.
  10. Hi, I'm using the Juniper template on 7.1 I have successfully customised the default font for the site however this hasn't updated the header font or button font styles, and I can't seem to identify the class names to add a custom font. Would someone be able to help please? I haven't launched the site yet to be able to provide a URL... Many thanks
  11. Been trying to create a header banner on the homepage with a carousel of 3 images with different copy. Preferable the banner image also loops. Been trying to find solution here from previous post but couldn’t find anything. If there are squarespace add ons available, I’d be happy to use that if it’s easier.
  12. Hi, I use the Adirondack template and want to maximize the header width (only the header width) to full screen, for all pages. Since the Adirondack template has a maximized width, I assume I need custom CSS to make this adjustment. Anyone tips? (click image; the background is white so only when clicking can you see the current width)
  13. Good morning all, I want to create a fixed header (scrolling along my pages). Do I have to code? My "MARTA" template is compatible with this function.
  14. Hi. I am trying to change my H1 on the home page of my site from green font to GIF animated. But I can't find the css I used to make it this way. Can someone take a look at my code and point to where it is? I want to delete it and use another code. Thanks! Here's my site css code. .image-block { -webkit-filter: drop-shadow( 5px 5px 8px #000000 ); filter: drop-shadow( 20px 15px 10px #000000 ); } // Announcement Bar Hover Color // .sqs-announcement-bar { width: 100%; background-color: #ff0000 !important; /* main color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .sqs-announcement-bar:hover { border-color: white !important; background-color: #6bae23 !important; /* hover color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } // Bounce Social Icons // @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .sqs-block-socialaccountlinks-v2 a svg{ top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .sqs-block-socialaccountlinks-v2 a{ -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); } .sqs-block-socialaccountlinks-v2 a:hover{ -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .social-icons-style-regular .sqs-use--icon{ fill: #000000 !important; } .social-icons-style-regular .sqs-svg-icon--wrapper:hover .sqs-use--icon{ fill: #FECB2F !important; } // Newsletter Block // .newsletter-block { padding: 50px !important; border-radius: 25px; background-color: #272732; } // Gradient Newsletter Block // .newsletter-block { background: linear-gradient(to bottom, #c0c0c0, #000000); padding: 50px !important; border-radius: 20px; } // Animation Keyframes // @-webkit-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } // Animated Gradient Audio Player // .sqs-widgets-audio-player { background-image: linear-gradient(-45deg, #ffffff, #ff0000, #000000, #F07C63) !important; background-size: 400% !important; -webkit-animation: Gradient 10s ease infinite !important; -moz-animation: Gradient 10s ease infinite !important; animation: Gradient 10s ease infinite !important; border-radius: 5px; } // Highlighted Field Form // .field-list .field-element:focus, .field-element:visited{ border-color: #FECB2F !important; } .field-list select:focus{ outline-color: #FECB2F !important; } .field-list .section{ border-color: #FECB2F !important; } .form-button-wrapper .button{ color: white !important; border-color: transparent; background-color: #fecb2f; } .form-button-wrapper .button:hover{ color: white !important; background-color: #000000 !important; } // Animation Keyframes // @-webkit-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } // Footer Top Border // Footer { border-top: 5px solid #ff0000; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } //remove hyphens// p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; } .sqs-search-page { .sqs-post-type-image.ContentItem { display:none !important; } } .image-slide-title { white-space: normal !important; line-height: 1.5em; } // Custom Color Social Icons // .sqs-use--icon { fill: #E77D6A !important; } // Pill Audio Block // .sqs-widgets-audio-player { border: 1px solid transparent; padding: 5px; border-radius: 50px; } @media screen and (max-width: 800px) { .sqs-block-image .design-layout-card:not(.sqs-narrow-width) { display: block!important; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper { width: 100%; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child { width: 100%; } } .sqs-block-button-element--small:hover:before, .sqs-block-button-element--small:focus:before, .sqs-block-button-element--small:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .sqs-block-button-element--small:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #FECB2F; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .sqs-block-button-element--small { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .sqs-block-button-element--small { margin: .4em; padding: 1em; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Mobile Menu Text // .header-menu-nav-item a { color: #FFFFFF !important; } // Righty Nav Line / @media all and (min-width:770px){ header nav a{ display: inline-block !important; float: none; } header nav a:hover:after{ transform: scaleX(1); } header nav a:after { display:block; content: ''; border-bottom: solid 2px #ff0000; transform: scaleX(0); transition: transform 250ms ease-in-out; z-index: 999; transform-origin :100% 50%; } } // Mobile Menu Background // .Mobile-overlay-menu { background-color: #000000; background: linear-gradient(to bottom, #b22222, #000000); } // Center Footer Text // @media only screen and (max-width: 640px) { footer { text-align: center;} } .Header--top, .Mobile-bar--top { background-image: url(https://static1.squarespace.com/static/5d4c573da7991a00018356bc/t/5dd5ef4cd168ef7c6a901a6b/1574301516774/Untitled+design.jpg); background-size: cover; background-position: center center; } // LINE BLOCK BORDER // .sqs-block-content hr { background-color: #000000 !important; border-top: #ffffff 1px solid !important; border-right: #ffffff 1px solid !important; border-bottom: #ffffff 1px solid !important; border-left: #ffffff 1px solid !important; } @media only screen and (max-width: 640px) { p { font-size: 16px; } } @media screen and (max-width: 641px) { body { font-size: 9pt; letter-spacing: 2px; line-height: 30px; } h1 {font-size: 13pt} h2 {font-size: 12pt} h3 {font-size: 10pt} } .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { display: block; float: right; position: relative; top: auto; left: -15px; right: 15px; bottom: auto; margin: 0 0 15px 0; padding: 0; background-color: transparent; color: inherit !important; font-size: 16px; line-height: 16px; cursor: pointer; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E003"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 32px; width: 16px; height: 32px; line-height: 32px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous { margin-right: 10px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E000"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 32px; width: 16px; height: 32px; line-height: 32px; } .sqs-block-summary-v2 .summary-heading { font-size: 24px; } .summary-heading { text-align: center !important; } .summary-carousel-pager .previous { position: absolute !important; left: 18px !important; right: inherit !important; } .summary-header-text{ position: relative !important; padding: 0 !important; left: 25px !important; } // GIF Mobile Menu Background // .header-menu-bg { background: url(https://static1.squarespace.com/static/5d4c573da7991a00018356bc/t/5dead2aca95b4527acb2152b/1575670474800/giphy+night+vision.gif); background-size: cover; background-position: center; } // Gradient Form Button // .form-wrapper input[type=submit] { font-size: 16px; padding: 20px; background: linear-gradient(to right, #F07C63, #E45372); } // Image Card Block Third Font // .sqs-block-image .design-layout-card em { font-size: 22px; text-transform: capitalized; letter-spacing: 4px; font-weight: 600; color: #000000; font-style: italics !important; display: block; } // Diagonal Style - Two Colors // .Main-content { background-color: #000000 ; /* make this your darkest color */ background-image: linear-gradient(to bottom right, #000000, #778899); } // Diagonal Style - Two Colors // #home-about { background-color: #000000 ; /* make this your darkest color */ background-image: linear-gradient(to bottom right, #000000, #778899); } // LINE BLOCK BORDER // .sqs-block-content hr { background-color: #000000 !important; border-top: #dcdcdc 1px solid !important; border-right: #dcdcdc 1px solid !important; border-bottom: #dcdcdc 1px solid !important; border-left: #dcdcdc 1px solid !important; }
  15. Hi, I'm trying to make my header an image, rather than a color. My site is:https://pelican-clover-hff6.squarespace.com Thanks so much for any help!
  16. Many versions of this question have been asked, but I'm a small business owner brand-new to Squarespace, I'm using 7.1, and so far none of the CSS solutions from previous versions of Squarspace seem to be working for me. I want to change the logo for individual pages - on my home page, I want my logo in its normal full-color form. For the rest of the pages, I want it to be all in white (this is to keep it visible against the backgrounds I'm giving it). I have the two separate versions of the logo (color and white). The color logo is currently on all of my pages, and the white logo is uploaded in my custom files. Is there a bit of CSS code that I can use to replace the logo in the header on any one page? Again, there are lots of answers to this already, but none are working, and I suspect it's because I am using 7.1. The answers all seem to be template-specific, but as far as I can tell, all of the templates are similar in 7.1, and I can't change my template to try different ones (??) Sorry if my question was confusing. Thank you!
  17. I'm trying to create a bilingual site and would like to have the language links as buttons on the header navigation, but it seems Squarespace 7.1 interface only allows for one custom button, social links and cart in the header navigation. I created a PT button for the Portuguese site and would like to create another button, EN for the English site. It there any way to add another button via code to the site header?
  18. Is it possible to add an RSS button to a header in Squarespace 7.1? I added a Twitter and Insta button, but I'd like to do the same for the site's RSS feed. Thank you!
  19. Hi! When I scroll down on my website, my header and navigation bar go away, which is annoying because I don’t want visitors to have to scroll all the way up to go to a different section of the website. I’d like my content to flow underneath a static header and navigation bar. I'm using Matsuya from 7.1. Any suggestions would be appreciated !
  20. Right now I have my header as far as it will go but it leaves about 20px on all sides white via a web browser. I would like to make the header full size what do I need to do? Also, I would like to have a full background with carefully placed elements on it (like a leaf or flower) just in one or two corners. What is the size of the background image for me to design this and or code to do this? This is a sample of what I am talking about for the background ( specifically that leaf area). OR could I include this in the header once it's extended?
  21. Hi there, Just looking for some help in trying to do a fixed header on the mentor template. Any help is much appreciated! Thanks, DC
  22. Hey! I've been testing my site load time on desktop and mobile and noticed that the mobile site loads the full 2500px wide banner image (2MB) rather than a smaller optimized version better for mobile. Is there any way (CSS perhaps) to force a smaller image to load? This is the site btw: https://www.motioncapturemonster.com/
  23. I want to have the logo and the title in my header on all pages. The logo would be on the left and the page title to the right of it. In the site header there is no setting that allows this (which is a strange UX decision), but I'm assuming it's customizable with CSS. Does anyone have suggestions for how to do this? I'm not a developer but I've done some CSS stuff on previous sites (not SquareSpace). My site is still on free trial if that matters (will be buying the service once the trial is over).
  24. I am working on one of the portfolio templates. I would like it to say my name (in a header font) and then graphic designer (in a different font and color) The template is only allowing me to use the one it comes with. (just the my name) How can I add a text box in the header/nav so I can add graphic designer in a contrasting way?
×
×
  • Create New...