boliverxed

Thank you so much! This worked 🙂

Hello, I have added a new font to my website, and I am using this in place of the Squarespace system fonts. I have added the font 'Centaur' to all headings (apart from h3) using code, however on the shop page, the product titles are still using the Squarespace system fonts. Please could someone advise how I could amend the CSS code so that Centaur is used for the product titles on the shopping page: www.reallygreatsite.com Thank you! --------------------------------------------------------------- The current code on my website: //ADDING ENGLAND FONT// @font-face { font-family: 'England'; src: url('https://static1.squarespace.com/static/662103ad66a0604f17b9137c/t/6621303a79e3a31067de0e2b/1713451066232/England+signature.otf'); } //ASSIGN ENGLAND FONT// h3 {font-family:england;} .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { left: -1em; right: auto; text-align: left; } //ADDING CENTAUR FONT - NORMAL// @font-face { font-family: 'Centaur'; src: url('https://static1.squarespace.com/static/662103ad66a0604f17b9137c/t/66588fd737e2785dd5579244/1717080024203/CentaurMTStd.ttf'); } /* ASSIGN CENTAUR FONT TO ALL HEADINGS WITH MORE SPECIFIC SELECTORS */ h1, h2, h4, h5, h6, .content h1, .content h2, .content h4, .content h5, .content h6 { font-family: 'Centaur', serif !important; /* Adding !important to override any existing styles */ } /* Optional: Override other elements that might use Fino font */ body, .header, .footer, .nav, .button, .site-title, .site-description { font-family: 'Centaur', serif !important; } /* Preserve existing header navigation styles */ .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { left: -1em; right: auto; text-align: left; } /* Header Navigation */ .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { left: -1em; right: auto; text-align: left; } /* Navigation Underline */ .header-nav-item a:hover { border-bottom: 1px solid #BF1931; } /* Underline Width */ .header-nav-folder-item a { display: inline-block !important; } /* Dropdown Text Color */ .header-nav-folder-item a, .header-nav-folder-content a { color: #ffffff !important; /* White */ } /* Change Text Color on Hover */ .header-nav-folder-content a:hover { color: #BF1931 !important; /* Red */ } /* Dropdown Menu Background */ .header-nav-folder-content { background: rgba(0,0,0,0.8) !important; } /* Active State */ .header-nav-item--active a, .header-menu-nav-item--active a, .header-nav-folder-item--active a { border-bottom: none !important; color: #BF1931 !important; } /* Button Hover */ .sqs-block-button-element:hover { background-color: #f1d2cf !important; /* Light red background on hover */ color: #BF1931 !important; /* Light red text color on hover */ border: 2px solid #BF1931 !important; /* Light red border on hover */ }

Thank you @tuanphan! That worked 🙂

Hello @tuanphan Thank you for your response. Yes, when the user is on all of the drop down options from the 'shop' navigation menu, and on any of the products, I would like the Shop item white and underlined. Is this possible?

Thanks! 🙂 Could you please take a look when you get the chance!

Hello, I am currently creating a site for a clothes business - this site is not yet live. I have code written into my website that changes the colour of the navigation option that has been selected (white underlined), however when I am using the shop feature and a drop down option is selected, or the webpage is on a product, I want the 'Shop' option in the navigation to be white underlined. The screenshots show what my navigation looks like when on the Home or About page, and the final screenshot shows what I see when any option from my shop dropdown menu is selected, or when on a product. Hope someone can help, Thanks!