Jump to content

Removing white space from rounded floating header using CSS

Recommended Posts



Link: https://grapefruit-pufferfish-pxfz.squarespace.com/

Password: ashley


I have used a ghost plug in to achieve this rounded header for my client, however there is white blank space where I would like it to be transparent. See image below. Is there any way to fix this?


Thanks so much for your help!




The CSS is: 

// Floating Header - Ghost //

@float-hdr-max-width: 2500px;
@float-hdr-padding: 15px 20px;
@float-hdr-border-radius: 10px;
@float-hdr-top-spacing: 20px;
@float-hdr-top-spacing-mobile: 20px;

/* --- Do Not Edit Below ---- */

.header-announcement-bar-wrapper { padding: @float-hdr-padding !important; margin: @float-hdr-top-spacing auto; max-width: @float-hdr-max-width  !important; width: 95%!important; } @media only screen and (max-width: 640px) { .header-announcement-bar-wrapper { width: auto !important; margin: 20px !important; }} .header .header-announcement-bar-wrapper [data-header-style="solid"] { border-radius: @float-hdr-border-radius !important; }

Link to comment
  • Replies 0
  • Views 137
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.