lizindc79 Posted January 24, 2022 Posted January 24, 2022 Site URL: https://www.etlicsw.com Can someone help me with advanced css for non-linked headers? I would like to change the color of the non-link page headers (currently white so you can't see my logo) but I don't have experience in coding and am not sure how I find out the number of the color I want to use from my color palette. Thank you!
Beyondspace Posted January 24, 2022 Posted January 24, 2022 7 minutes ago, lizindc79 said: Site URL: https://www.etlicsw.com Can someone help me with advanced css for non-linked headers? I would like to change the color of the non-link page headers (currently white so you can't see my logo) but I don't have experience in coding and am not sure how I find out the number of the color I want to use from my color palette. Thank you! Can you share some screenshot of the desired result you want to achieve? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
lizindc79 Posted January 24, 2022 Author Posted January 24, 2022 47 minutes ago, bangank36 said: Can you share some screenshot of the desired result you want to achieve? https://www.etlicsw.com/privacy-policy I would like, instead of the header to just be white, to be the same color as the footer or the color of the "Individual Therapy" section under "Services". Thanks!
tuanphan Posted January 25, 2022 Posted January 25, 2022 16 hours ago, lizindc79 said: https://www.etlicsw.com/privacy-policy I would like, instead of the header to just be white, to be the same color as the footer or the color of the "Individual Therapy" section under "Services". Thanks! Edit Privacy Policty Page >> Add a Code Block at bottom of page >> Paste this code into Code Block <style> header#header { background-color: #6b8373 !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
lizindc79 Posted January 25, 2022 Author Posted January 25, 2022 You are incredible! That absolutely worked. Is there a way to get the "Welcome" page sections in white?
tuanphan Posted January 26, 2022 Posted January 26, 2022 17 hours ago, lizindc79 said: You are incredible! That absolutely worked. Is there a way to get the "Welcome" page sections in white? You mean Navigation items black to white or?? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
tuanphan Posted January 27, 2022 Posted January 27, 2022 20 hours ago, lizindc79 said: Yes, navigation items. White. Use this new code <style> header#header { background-color: #6b8373 !important; } .header-nav-item a { color: white !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
lizindc79 Posted January 27, 2022 Author Posted January 27, 2022 Brilliant. I so appreciate your help.
BAA Posted May 4, 2023 Posted May 4, 2023 Hi, Sorry to jump on this comment section, but wondering if maybe you can help me. I want to change the colour of the navigation item called, BBQ Menu, on the header of my website to differentiate it from the different items. Right now all of them are white and want to make BBQ Menu to this colour #94624A if possible. Here is the link to our website for reference. https://www.edgecatering.ca/ Thank you!!
BAA Posted May 4, 2023 Posted May 4, 2023 Right now, I have these .header-nav-folder-title[href="bbq-menu"] { color: #94624A !important; font-weight: bold; } but is not working 😕
tuanphan Posted May 6, 2023 Posted May 6, 2023 On 5/5/2023 at 6:04 AM, BAA said: Right now, I have these .header-nav-folder-title[href="bbq-menu"] { color: #94624A !important; font-weight: bold; } but is not working 😕 You can also use this approach, it would be easier for you in the future div.header-nav-item:nth-child(8)>a { color: #94624A !important; font-weight: bold; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
loylabel Posted May 9, 2023 Posted May 9, 2023 @tuanphan hey man if you can help me, Im starting another paid website on squarespace and now I want to do things right from the begining. the site is: https://primrose-cube-5ejs.squarespace.com/ I want 3 things changed in the header. 1 - Navigation Menu NOT stacked. 2 - Site title "Axe Bathroom and Mirros aligned verticaly with social icons and phone button. 3 - A space above the top margin of the header. TY!
tuanphan Posted May 11, 2023 Posted May 11, 2023 On 5/9/2023 at 11:37 PM, loylabel said: @tuanphan hey man if you can help me, Im starting another paid website on squarespace and now I want to do things right from the begining. the site is: https://primrose-cube-5ejs.squarespace.com/ I want 3 things changed in the header. 1 - Navigation Menu NOT stacked. 2 - Site title "Axe Bathroom and Mirros aligned verticaly with social icons and phone button. 3 - A space above the top margin of the header. TY! What is password? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
ILong Posted May 12, 2023 Posted May 12, 2023 Hi @tuanphan! I'm curious, is there CSS we can insert to change the layout of the header in a different way than what is available? I would like the logo to be centred, but the pages/folders not to be "stacked" to the left or underneath. I wonder if there is a way to put all the pages/folders in line with the logo, some pages/folders on the left and some on the right? And the logo still in the centre? For example, all in one line: About me.....What is EFT?.....Ways to work with me.....(LOGO IMAGE)....Events....Blog.....Research Thank you! Ioana
tuanphan Posted May 14, 2023 Posted May 14, 2023 On 5/12/2023 at 1:23 PM, ILong said: Hi @tuanphan! I'm curious, is there CSS we can insert to change the layout of the header in a different way than what is available? I would like the logo to be centred, but the pages/folders not to be "stacked" to the left or underneath. I wonder if there is a way to put all the pages/folders in line with the logo, some pages/folders on the left and some on the right? And the logo still in the centre? For example, all in one line: About me.....What is EFT?.....Ways to work with me.....(LOGO IMAGE)....Events....Blog.....Research Thank you! Ioana Yes. Possible with some ways. If you share link to your site, we can check easier With this layout, you can change header layout to Left Nav - Logo Then we can help you easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
lauraclay Posted October 24 Posted October 24 hi! I'm trying to create a header for my website to look like this (see attached image). I would like to have horizontal buttons (vs. the drop-down menu/burger menu) that stay fixed as the reader goes up and down the page. Here is the code I have injected into the footer right now (also have different coding in my custom CSS and header page)-- but nothing is working and feeling pretty defeated. <script> $( ( ) => { /* begin header buttons add License : < https://tinyurl.com/s872fb68 > Version : 0.8.0 SS Version : 7.1 Fluid Engine Compatible : Not Applicable Dependencies : jQuery By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ const buttonsAdd = [ /* following is an example of a new button data structure. copy the example new button data structure and paste after the example new button data structure. remove the forward slash asterisk and asterisk forward slash lines from before and after the copied example. repeat for as many new buttons you want to create. this has been done once initially */ /* { text : '[enter button text here between single quotes replacing square brackets]', url : '[enter url here between single quotes replacing square brackets]', // type is is optional. values are secondary, or tertiary type : '[optional, enter type here between single quotes replacing square brackets]' }, */ { text : 'meet laura', url : 'https://tuliptreecounseling.com/about-laura', // type is is optional. values are secondary or tertiary type : 'tertiary' }, */ { text : 'meet shelby', url : 'https://tuliptreecounseling.com/about-shelby', // type is is optional. values are secondary or tertiary type : 'tertiary' }, */ { text : 'services', url : 'https://tuliptreecounseling.com/services', // type is is optional. values are secondary or tertiary type : 'tertiary' }, ] /* targetAtttributeValue is an optional setting. enter _self, _blank, _parent, _top, or framename see < https://mzl.la/2Q0JROF > between single quotes */ const targetAtttributeValue = ''; /* buttonOriginalTargetAttributeAdd is an optional setting. use false or true. when true the target attribute will be added to SS's built-in cta button */ const buttonOriginalTargetAttributeAdd = false; // do not change anything below, there be the borg here const codeName = 'Header Buttons Add'; const selector = '.header-actions-action--cta, .header-menu-cta'; const typeClassMap = { secondary : 'sqs-button-element--secondary', tertiary : 'sqs-button-element--tertiary' }; const version = '0.8.0'; const s = `${ codeName } v${ version }, ` + 'License < https://tinyurl.com/s872fb68 >, ' + 'Tom\'s Web Consulting < http://www.tomsWeb.consulting >'; console.log ( s ); $( selector ).each ( function ( ) { const $this = $( this ); const $buttonOriginal = $( '.btn:first', $this ); $.each ( buttonsAdd, function ( index, buttonAdd ) { const $button = $buttonOriginal .clone ( ) .attr ( 'href', buttonAdd.url ) .text ( buttonAdd.text ) .appendTo ( $this ); if ( targetAtttributeValue ) $button.attr ( 'target', targetAtttributeValue ); const clss = typeClassMap [ buttonAdd.type ]; if ( clss == undefined ) return true; // continue $button .removeClass ( 'sqs-button-element--primary' ) .addClass ( clss ); } ); if ( buttonOriginalTargetAttributeAdd && targetAtttributeValue ) $buttonOriginal.attr ( 'target', targetAtttributeValue ); } ); /* end header buttons add */ } ); </script>
tuanphan Posted October 27 Posted October 27 On 10/24/2024 at 11:29 PM, lauraclay said: hi! I'm trying to create a header for my website to look like this (see attached image). I would like to have horizontal buttons (vs. the drop-down menu/burger menu) that stay fixed as the reader goes up and down the page. Here is the code I have injected into the footer right now (also have different coding in my custom CSS and header page)-- but nothing is working and feeling pretty defeated. <script> $( ( ) => { /* begin header buttons add License : < https://tinyurl.com/s872fb68 > Version : 0.8.0 SS Version : 7.1 Fluid Engine Compatible : Not Applicable Dependencies : jQuery By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ const buttonsAdd = [ /* following is an example of a new button data structure. copy the example new button data structure and paste after the example new button data structure. remove the forward slash asterisk and asterisk forward slash lines from before and after the copied example. repeat for as many new buttons you want to create. this has been done once initially */ /* { text : '[enter button text here between single quotes replacing square brackets]', url : '[enter url here between single quotes replacing square brackets]', // type is is optional. values are secondary, or tertiary type : '[optional, enter type here between single quotes replacing square brackets]' }, */ { text : 'meet laura', url : 'https://tuliptreecounseling.com/about-laura', // type is is optional. values are secondary or tertiary type : 'tertiary' }, */ { text : 'meet shelby', url : 'https://tuliptreecounseling.com/about-shelby', // type is is optional. values are secondary or tertiary type : 'tertiary' }, */ { text : 'services', url : 'https://tuliptreecounseling.com/services', // type is is optional. values are secondary or tertiary type : 'tertiary' }, ] /* targetAtttributeValue is an optional setting. enter _self, _blank, _parent, _top, or framename see < https://mzl.la/2Q0JROF > between single quotes */ const targetAtttributeValue = ''; /* buttonOriginalTargetAttributeAdd is an optional setting. use false or true. when true the target attribute will be added to SS's built-in cta button */ const buttonOriginalTargetAttributeAdd = false; // do not change anything below, there be the borg here const codeName = 'Header Buttons Add'; const selector = '.header-actions-action--cta, .header-menu-cta'; const typeClassMap = { secondary : 'sqs-button-element--secondary', tertiary : 'sqs-button-element--tertiary' }; const version = '0.8.0'; const s = `${ codeName } v${ version }, ` + 'License < https://tinyurl.com/s872fb68 >, ' + 'Tom\'s Web Consulting < http://www.tomsWeb.consulting >'; console.log ( s ); $( selector ).each ( function ( ) { const $this = $( this ); const $buttonOriginal = $( '.btn:first', $this ); $.each ( buttonsAdd, function ( index, buttonAdd ) { const $button = $buttonOriginal .clone ( ) .attr ( 'href', buttonAdd.url ) .text ( buttonAdd.text ) .appendTo ( $this ); if ( targetAtttributeValue ) $button.attr ( 'target', targetAtttributeValue ); const clss = typeClassMap [ buttonAdd.type ]; if ( clss == undefined ) return true; // continue $button .removeClass ( 'sqs-button-element--primary' ) .addClass ( clss ); } ); if ( buttonOriginalTargetAttributeAdd && targetAtttributeValue ) $buttonOriginal.attr ( 'target', targetAtttributeValue ); } ); /* end header buttons add */ } ); </script> You can share site url, we can check code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
tuanphan Posted October 30 Posted October 30 On 10/24/2024 at 11:29 PM, lauraclay said: hi! I'm trying to create a header for my website to look like this (see attached image). I would like to have horizontal buttons (vs. the drop-down menu/burger menu) that stay fixed as the reader goes up and down the page. Here is the code I have injected into the footer right now (also have different coding in my custom CSS and header page)-- but nothing is working and feeling pretty defeated. <script> $( ( ) => { /* begin header buttons add License : < https://tinyurl.com/s872fb68 > Version : 0.8.0 SS Version : 7.1 Fluid Engine Compatible : Not Applicable Dependencies : jQuery By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ const buttonsAdd = [ /* following is an example of a new button data structure. copy the example new button data structure and paste after the example new button data structure. remove the forward slash asterisk and asterisk forward slash lines from before and after the copied example. repeat for as many new buttons you want to create. this has been done once initially */ /* { text : '[enter button text here between single quotes replacing square brackets]', url : '[enter url here between single quotes replacing square brackets]', // type is is optional. values are secondary, or tertiary type : '[optional, enter type here between single quotes replacing square brackets]' }, */ { text : 'meet laura', url : 'https://tuliptreecounseling.com/about-laura', // type is is optional. values are secondary or tertiary type : 'tertiary' }, */ { text : 'meet shelby', url : 'https://tuliptreecounseling.com/about-shelby', // type is is optional. values are secondary or tertiary type : 'tertiary' }, */ { text : 'services', url : 'https://tuliptreecounseling.com/services', // type is is optional. values are secondary or tertiary type : 'tertiary' }, ] /* targetAtttributeValue is an optional setting. enter _self, _blank, _parent, _top, or framename see < https://mzl.la/2Q0JROF > between single quotes */ const targetAtttributeValue = ''; /* buttonOriginalTargetAttributeAdd is an optional setting. use false or true. when true the target attribute will be added to SS's built-in cta button */ const buttonOriginalTargetAttributeAdd = false; // do not change anything below, there be the borg here const codeName = 'Header Buttons Add'; const selector = '.header-actions-action--cta, .header-menu-cta'; const typeClassMap = { secondary : 'sqs-button-element--secondary', tertiary : 'sqs-button-element--tertiary' }; const version = '0.8.0'; const s = `${ codeName } v${ version }, ` + 'License < https://tinyurl.com/s872fb68 >, ' + 'Tom\'s Web Consulting < http://www.tomsWeb.consulting >'; console.log ( s ); $( selector ).each ( function ( ) { const $this = $( this ); const $buttonOriginal = $( '.btn:first', $this ); $.each ( buttonsAdd, function ( index, buttonAdd ) { const $button = $buttonOriginal .clone ( ) .attr ( 'href', buttonAdd.url ) .text ( buttonAdd.text ) .appendTo ( $this ); if ( targetAtttributeValue ) $button.attr ( 'target', targetAtttributeValue ); const clss = typeClassMap [ buttonAdd.type ]; if ( clss == undefined ) return true; // continue $button .removeClass ( 'sqs-button-element--primary' ) .addClass ( clss ); } ); if ( buttonOriginalTargetAttributeAdd && targetAtttributeValue ) $buttonOriginal.attr ( 'target', targetAtttributeValue ); } ); /* end header buttons add */ } ); </script> You mean make nav items appear on right of logo? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
tuanphan Posted November 1 Posted November 1 You can use this code to Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('nav.header-nav-list .header-nav-folder-content').clone().appendTo('.header-display-desktop .header-actions.header-actions--right'); }); </script> <style> .header-actions.header-actions--right>div:last-child { display: none !important; } .header-actions.header-actions--right>div.header-nav-folder-content { display: flex; align-items: center; } .header-actions.header-actions--right a { color: #fff; margin-left: 10px; margin-right: 10px; } .header-actions.header-actions--right { flex-direction: row-reverse; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
lauraclay Posted November 2 Posted November 2 YOU ARE AMAZING. Is there anyway I could make the logo to the far left and get rid of the drop down menu? I also would love if the buttons had a border around them to make them more spaced out? THANK YOU AGAIN
lauraclay Posted November 2 Posted November 2 wait I think I figured that out-- its just the mobile view is now not working properly. Any suggestions are greatly appreciated!
tuanphan Posted November 4 Posted November 4 Change to this new code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('nav.header-nav-list .header-nav-folder-content').clone().appendTo('.header-display-desktop .header-actions.header-actions--right'); }); </script> <style> .header-display-desktop .header-actions.header-actions--right>div:last-child { display: none !important; } .header-display-desktop .header-actions.header-actions--right>div.header-nav-folder-content { display: flex; align-items: center; } .header-display-desktop .header-actions.header-actions--right a { color: #fff; margin-left: 10px; margin-right: 10px; } .header-display-desktop .header-actions.header-actions--right { flex-direction: row-reverse; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment