Jump to content

Announcement bar - shorten the distance between the bar and the navigation header

Go to solution Solved by tuanphan,

Recommended Posts

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

image.png.cbb2ac3b047823fc8c7dc8bd41c53aca.png

It should be

/* Decrease height */
.sqs-announcement-bar-text {
    padding-top: 0px !important;
    padding-bottom: 0px !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
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?

image.thumb.png.d07b15463ed17697311c4552e1d31fa0.png

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
3 hours ago, tuanphan said:

I see the code works here, if you changed to 0px, or you mean space between logo - announcement bar?

image.thumb.png.d07b15463ed17697311c4552e1d31fa0.png

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.