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

Search the Community

Showing results for tags 'heading'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers ๐Ÿ‡ซ๐Ÿ‡ท's Topics
  • France Designers ๐Ÿ‡ซ๐Ÿ‡ท's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://www.nickdavid.co.uk/ Hi, I am working on a site which is using Wexley as its base template. The default social icons are only available on the bottom footer where I can move them left/right/center. I wish there was a way to move the footer block to the top right of the site above the header text or alternatively add new set of social icons to the top right of the site. If someone know a good way to insert some code to fix this that would be very helpful. I have attached images for what I am talking about. This only is required to work on the desktop version. Thanks for the help
  2. Hey Guys! I like to use list elements a lot, because they enable swiping through items on mobile. I use them for "buzzword-roulettes" ๐Ÿ˜‰ and "teams". Unfortunately โ€“ the "title" of the items is generated as Heading 2/ H2, so I end up with a messed up heading hierarchy with a lot of H2 with buzzwords or names. I know, I could disable titles on items, but this way I can't make a phrase stand out in the description size wise and I am limited to make the phrase bold. Any idea how to disable / prevent / override this?
  3. Site URL: https://www.nela-nela.com Hello, I am trying to fix an issue. I found several partial solutions here but no complete solutions. Website is www.nela-nela.com On most of the website the header (navigation text, logo, social icons, cart icons) are white, which is good with our background images. However, on the product pages of our shop, we don't want to have a background image, and the header is lost in the white background. I found code to change the color of the navigation links and to invert the color of the site logo, but I couldn't find code to do this for the social media icons or the shopping cart icon. In addition, all the code I found, I added through the "Code Injection" function on the Shop page. However, this also changes the header color in the shop (https://www.nela-nela.com/shop), which we don't want to be changed. Very specifically, these are the pages which we want to change. https://www.nela-nela.com/shop/p/superfruit-leaf-tea-collection https://www.nela-nela.com/shop/p/blueberry-leaf-tea https://www.nela-nela.com/shop/p/blackberry-leaf-tea https://www.nela-nela.com/shop/p/mulberry-leaf-tea Can anyone help us figure out how to change all elements in the header (navigation, logo, social media icons, cart icon) from white to black on these pages only? Thanks!
  4. Site URL: https://www.wahlumacademy.com/about I've checked on Mac OS 10.17.5 using Firefox and Chrome. I noticed that when I scroll down the page (or any page on the site), the header appears to scroll a pixel or two. If I scroll back to the top, it moves back in place. One of the other people working on the website said the shrink class is being automatically added when this happens. Looking at inspect shows this. Can someone please take a look at our website and tell me how to fix it so the header doesn't move when a page is scrolled? No problem if we have to add some CSS. I just need to know what is causing this. Thank you! -tony
  5. Hello, I want to have a website header that shows a picture with arrow on sites, which moves every couple of seconds and shows a different picture. It's perfect to display several of your services and so on... I have noticed squarespace released a new headline feature with automated content management, but unfortunately, it doesn't work as a header on the very website top, because the menu background will not be covered by it and is left blank... Any suggestions? Thank you!
  6. Site URL: http://www.furkhaniqbal.com Hi, I wanted to add the following text "Digital Designer" beside the site title. However, I did not want it to appear on mobile (desktop only) and wanted it optimised so it maintains inline with the rest of the content? How could I do this?
  7. Once you add the second Button via the Code you have provided how can you get it to link to an internal part of your page, I understand how to change the code to reflect to different URL's but i can't get it work so that it links to somewhere already on my page. My existing button is done via the following <div ID="example"></div> and my button link then is - #example and this takes me to a different section of my page. Any help is much appreciated, thank you.
  8. Site URL: https://www.rinnegatiandco.com Hi there! I'm trying to align the header logo image further to the left on a client's site. None of the coding I've found thus far has done the trick. Halp! ๐Ÿ™‚
  9. Site URL: https://fife-salamander-9w6h.squarespace.com/ Password: PetraHemmerijckx1760 It is about the heading (creArtep) in the gold rectangle on the homepage that overlays the image. In desktop view my client wants a bigger title, as big as possible while preserving x amount of padding above and beneath the title. No problem, I changed it to an H1 title and the description below as a paragraph 1. But when I go to mobile view and change the title and desc to a smaller size, H3 and P2, the size also changes to H3 and P2 for the desktop view. Would I have to change the CSS in the advance tab with an @media only tag to account to allocate the correct heading size to certain screen sizes?
  10. I'm trying to put a border above and below the navigation, but every time i do it moves the shopping cart and social links to the middle too. Is there a way to put a line above and below the navigation links without moving the shopping cart and social links too? This is the code I'm using: @media only screen and (min-width:640px) {.header-announcement-bar-wrapper { padding-left: 0px !important; padding-right: 0px !important; }} @media only screen and (min-width:640px) {.header-display-desktop { flex-direction: column; }} @media only screen and (min-width:640px) {.header-title-nav-wrapper { flex: 0 0 100% !important; margin-right: auto; width: 100% !important; }} @media only screen and (min-width:640px) {nav.header-nav-list { display: flex; width: 100%; border-top: 2px solid #59636C; border-bottom: 2px solid #59636C; padding-top: 10px; padding-bottom: 10px; margin-bottom: -22px; }} Thanks!
  11. Hi, I have applied a portfolio page which is acting as my home page. On this page I have customised the header to be sticky so that it appears under a video on loading the page and as you scroll down it sticks to the top. This works perfect on the home page but it is the only page that i want it to appear. It doesnt happen on the contact us or about page however at the moment it is appearing on the portfolio subpages which are linked to the home page. Does anyone know how to exclude this style from appearing on the subpages. Below is the code I have currently <style> @media screen and (min-width: 768px) { #header { position: sticky; top: 0; display: none; z-index: 10000; } main .page-section:first-child + #header { display: block; } main .page-section:first-child { min-height: calc(100vh - 93px)!important; } } </style>
  12. Site URL: https://www.yasmineandomar.com/ Can some one tell me, im trying to move the ( RSVP ) button to the upper right, any help please.
  13. Hi there! Trying this again! Would anyone know what the custom css code would be to inject copy into the header of each specific page? I want the titles of the page to be in the header instead of below it. I also want the font to stay consistent. Thank you!
  14. Site URL: https://mcnaegroup.squarespace.com/config/ Website: https://mcnaegroup.squarespace.com/config/ Password: studio@mcnaegroup1 I have a H1 heading which looks great in a full window, and in mobile view...but if you make the desktop window slightly smaller the text suddenly jumps bigger. I thought changing the tablet text size might help but i had no success. Can any one help? //mobile text size// @media only screen and (max-width: 767px) { h1 { font-size: 35px !important; line-height:115% }} //tablet text size// @media screen and (max-width: 960px){ h1 { font-size: 35px !important; }}
  15. Site URL: https://delawarerising.club/ When I open the site on different iPhone versions the logo isn't centered ๐Ÿ˜ž I'm assuming there's something wrong with the custom code I'm using? //*mobile site logo sizing/position*// @media only screen and (max-width: 640px) { #header #logoWrapper #logoImage img, #header #siteTitleWrapper #logoImage img { max-height: 300px; margin: -90px; } #header #logoWrapper, #header #siteTitleWrapper { position: relative; max-height: auto; max-width: 30%; transform: translate(-50%,-80%); } }
  16. Site URL: https://derricksaenz.com Hello! I am working on getting my website to look nice and clean, and one of the things on my mind is getting the header to be concise. So, I wanted to use a hamburger menu to collapse all my navigation and put it on the side of my website. However, the problem is that when I open it, there is some padding issue with the flex box or something, and it pushes all my links to the side. I would want everything left or center justified to the square I have set. Pasting my code below for reference. All found free while scouring the internet. /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none !important; } /* Hide header button */ .header-actions { display: none !important; } /* show burger */ .header-burger { display: flex !important; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; } } @media screen and (min-width:992px) { .container.header-menu-nav-item, .header-menu-nav-item a, .header-menu-actions.language-picker-content, .header-menu-actions.language-picker { font-size: 28px !important; margin-top: 0px !important; margin-bottom: 5px !important; min-width: unset !important; } .header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; margin-left: 66% !important; margin-right: 10% !important; margin-top: 1.75% !important; height: 33% !important; box-shadow: 0px 30px 100px rgba(12,112,232,.5) !important; transition: opacity .5s cubic-bezier(0.32, 0.08, 0.24, 1); -webkit-transition: opacity .5s cubic-bezier(0.32, 0.08, 0.24, 1); } .header-display-mobile .header-title-text { width: 20vw !important; font-size: 1.5rem !important; } .header-menu-nav-folder-content { justify-content: flex-start !important; /* vertical alignment of navigation */ text-align: center !important; /* navigation text alignment */ } .header-menu-nav-folder:not(.header-menu-nav-folder--active) { display: none !important; /* hides non-active folder */ } .header-menu-cta { width: 33vw !important; /* width of button */ } .header-menu-cta a { min-width: unset !important; } } The away that my code is set up, it doesn't allow for folders or the language switch option, which sucks since I'd appreciate those features. They just get pushed off the blue background. If that issue can be addressed too, that would be AWESOME, but I'm mainly holding out for the spacing since that more pertinent. I am somewhat trying to emulate clay.global's header, given that I have a clean aesthetic and a similarly simple logo going. I think that looks awesome and super intuitive despite it being hidden in a hamburger. I would appreciate any help or insight. Feel free to criticize the code too if you want ๐Ÿ˜…. Thank you!
  17. Hi, we're trying to improve our SEO and in a tool that we used, it has indicated that we don't have an H1 Heading in our website. Our current heading right now is just our company logo and we have already indicated our site's title on it as well. Is there something we should do? Does it need to be in text for it to be considered an H1 heading? Thanks in advance for your help.
  18. Site URL: https://www.polyesterzine.com/ Hi! I've made a page on the site to used instead of Linktree - http://polyesterzine.com/links - and used a header injection code from here - https://christyprice.com/blog/a-linktree-alternative-for-squarespace-users to remove the header and footer from the page, but on mobile it is leaving a massive gap at the top of the page. Attached a screenshot of what I mean! Is there a header injection code I can use to remove this? Thanks so much! Gina
  19. Site URL: https://www.gender404shop.com I am looking to make the site title unclickable on my website. Does anyone know a code I can add to my website to make this happen? Website password is "october1st" as we are not live yet.
  20. Designing your site header is an important step as it plays such a big role in how visitors navigate and interact with your content. It looks the same throughout your site and typically includes your navigation and title or logo display. It can also include social or shopping cart icons, or even a call-to-action button! With style options like Gradient, the ability to use a custom color for the background, adding borders and drop shadows, you can create a unique design that fits your brand and makes your website stand out. You can read more about styling options in our Building a site header guide. How did you choose your headerโ€™s design? Have you played around with the new options? Share the results and your experiences in the comments below!
  21. Site URL: https://www.lucienandsolenn.com/ Hello there! I know that there is some post about this, and I found a good code for it . However, I cannot find a way to "stop the line" under the drop down menu links and make it 100% of the word, not beyond. How can I do? I post the picture of it below. Thank you in advance! My website password : Forthesakeoflove Here is the css code : .header-nav-item > a:after, .header-nav-folder-item > a:after { content:''; width: 0px; height: 1px; background: #fff; display: block; transition: width .2s ease; } .header-nav-item > a, .header-nav-folder-item:hover { background: none !important; } .header-nav-item--active > a:after, .header-nav-item:hover > a:after, .header-nav-folder-item:hover > a:after { width: 100%; } .header-nav-folder-item:hover > a { color: #fff !important; }
  22. Site URL: https://www.teresav.me/ My website homepage has a scrolling header of countries i've been to which I really like. But on mobile, the first and last countries (Ireland and Spain) overlap in a very ugly way. As far as I'm aware it doesn't do this on desktop. I've tried some of the easy fixes, like adding spaces, and adding a second item that is only spaces (as the text list of countries is all one item), but the problem persists (See attached). I would like to avoid making each country its own item because that seems tedious, but i'll do it if that's the recommended solve.
  23. Site URL: https://cyclovfx.squarespace.com Hello, I wanted to ask how I can have a different header style for my homepage. Which would be a Dynamic setting where I can have the background of the section below going into the header. But for other sites I would like to keep it as solid black.
  24. Site URL: http://capybera-point-sp57.squarespace.com Hey there! I was wondering if there's a way to have a transparent fixed header that switches the font color when scrolling. I'm not sure if that makes sense. So right now my header is in dynamic mode and I have the font color as a white because I like the way it looks on the colors of the moving background. However, I want to add a fixed scrolling header and an issue comes into play when I scroll down. Lower down the background of my site is white, so you aren't able to see the text in the header. Is there a way to have the text be white while at the top of the page, and then change to black or another more visible color when you scroll down?
  • Create New...