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

  1. Hi -- I'm designing a site using the Clarkson template and can change the font size of the Paragraph and Headings fonts -- but my links in the header bar (Home/About/Location) are just too small. Any way to enlarge these? Thanks! https://grape-fiddle-5tas.squarespace.com/
  2. Strong cardio will assist your Velofel body burn fat quicker, may help locate ripped muscles quicker, terrible to mention the advantages that running has regarding your heart. Do interval training just like walk for a minute, next run seeing any minute or 2. Then Velofel switch up to walk for 2 minutes and operate for five, just keep it changing every single time. https://supplementscare.co.za/velofel-south-africa/
  3. Hey everyone, I need help changing the color of my header to black with white text when I'm on the product page of my website. The reason is that my logo has white wording in it and the white background completely covers half the logo. It does this on both web and mobile. I've been at this for days now and I can't seem to figure this out. See attached screenshots for reference. I attached what it looks like on my home page with the logo NOT covered by white background. And then again what it looks like covered. Any help is MUCH appreciated. Thanks, LW
  4. Hi, I need to make the header menu in a way that the logo bleeds across the menu, so that the edges of the logo are outside the header borders. Anyone who can help? Site: https://gar-heptagon-942j.squarespace.com/ Password: filmfilm
  5. 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)
  6. Hello, looking for a code to fix the header on my site www.BettyBoujee.com My header is transparent visible when you first log into the homepage and when you scroll down it becomes visible with a white background. Wanted to essentially hide the header when you first log into the homepage then when you scroll down it becomes visible and "sticks". Hopefully I explained it okay and it makes sense. An example of how I want it to be like http://www.cocktailcar.co.il/
  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. 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!
  9. 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 };
  10. 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.
  11. 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.
  12. 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! :)
  13. 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
  14. 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.
  15. 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
  16. 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.
  17. 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.
  18. 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; }
  19. 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!
  20. 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!
  21. 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?
  22. 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!
  23. 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 !
  24. 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?
×
×
  • Create New...