LukeDesign Posted May 3 Share Posted May 3 Hi @tuanphan, I am having similar issues with resizing the announcement bar. I've gone through the steps in this thread (and the other thread on this topic). I was able to change the font size and text placement without issue, but the decrease height of the pad is not working. I want to shorten the distance between the bar and the navigation header. Also not working is removing the underline from the URL link. Here is the code I am using: =================================== ANNOUNCEMENT BAR: CLIENT LOGIN =================================== **/ /* Customize Client Button */ .sqs-announcement-bar-text a { position: relative; text-decoration: none !important; margin: 5px!important; padding: 1px!important; line-height: 0em} /* Decrease font size */ .sqs-announcement-bar-text p { font-size: 10px !important;; } /* Remove X icon */ span.sqs-announcement-bar-close { visibility: hidden !important; display: none !important; } /* Bar Text Align */ .sqs-announcement-bar p { text-align: right; padding-right: 10px; } /* Decrease height */ .sqs-announcement-bar-text { padding-top: 0px; padding-bottom: 0px; } Here is my site: https://www.lucasano.com/inquire Link to comment
tuanphan Posted May 3 Share Posted May 3 6 hours ago, LukeDesign said: Hi @tuanphan, I am having similar issues with resizing the announcement bar. I've gone through the steps in this thread (and the other thread on this topic). I was able to change the font size and text placement without issue, but the decrease height of the pad is not working. I want to shorten the distance between the bar and the navigation header. Also not working is removing the underline from the URL link. Here is the code I am using: =================================== ANNOUNCEMENT BAR: CLIENT LOGIN =================================== **/ /* Customize Client Button */ .sqs-announcement-bar-text a { position: relative; text-decoration: none !important; margin: 5px!important; padding: 1px!important; line-height: 0em} /* Decrease font size */ .sqs-announcement-bar-text p { font-size: 10px !important;; } /* Remove X icon */ span.sqs-announcement-bar-close { visibility: hidden !important; display: none !important; } /* Bar Text Align */ .sqs-announcement-bar p { text-align: right; padding-right: 10px; } /* Decrease height */ .sqs-announcement-bar-text { padding-top: 0px; padding-bottom: 0px; } Here is my site: https://www.lucasano.com/inquire The code missing some symbols It should be /* Decrease height */ .sqs-announcement-bar-text { padding-top: 0px !important; padding-bottom: 0px !important; } kaydotjpg 1 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!) Link to comment
LukeDesign Posted May 3 Author Share Posted May 3 That worked. That's adjusting the pad for the text only. Is there a code to adjust the actual height of the bar itself? Link to comment
tuanphan Posted May 4 Share Posted May 4 20 hours ago, LukeDesign said: That worked. That's adjusting the pad for the text only. Is there a code to adjust the actual height of the bar itself? I see the code works here, if you changed to 0px, or you mean space between logo - announcement bar? 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!) Link to comment
LukeDesign Posted May 4 Author Share Posted May 4 3 hours ago, tuanphan said: I see the code works here, if you changed to 0px, or you mean space between logo - announcement bar? Yes, I am hoping to reduce the spacing between the logo and announcement bar. I've adjusted all I could in Squarespace's settings for the header height without the logo touching the bottom of the header. Link to comment
Solution tuanphan Posted May 5 Solution Share Posted May 5 20 hours ago, LukeDesign said: Yes, I am hoping to reduce the spacing between the logo and announcement bar. I've adjusted all I could in Squarespace's settings for the header height without the logo touching the bottom of the header. You can use this div.header-announcement-bar-wrapper { padding-top: 1px !important; } 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!) Link to comment
LukeDesign Posted May 5 Author Share Posted May 5 4 hours ago, tuanphan said: You can use this div.header-announcement-bar-wrapper { padding-top: 1px !important; } That's great, thank you! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment