Jump to content

Sticky header with logo, bag, search and burger

Recommended Posts

Hi, can anyone help me? I'm very new to custom code. I somehow managed to create a sticky header with the logo in the middle but I'd like to have the burger on far left, shopping bag on far right and search button to the left of it with a clickable logo in the middle.

At the moment it looks odd and I cant remove the navigation on the right. Also announcement bar is in the wrong place (pictures attached)

 

Thanks!

IMG_5401 copy.png

Link to comment
  • Replies 8
  • Views 412
  • Created
  • Last Reply

Top Posters In This Topic

So

  • Announcement bar will be on top of header
  • Remove right navigation
  • Add a Search icon > Click Search will open search page then users can enter search keyword
  • Add a Cart icon (no cart quantity) > Click Cart will open cart page?

Is this right?

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

Exactly. The following please:

  • Announcement bar always above the sticky header
  • Remove text navigation from both desktop and mobile
  • Content to flow and disappear under header (currently it flows under while still visible)
  • Logo on mobile to be clickable (to homepage)
  •  

Header components:

Desktop:  photo attached 

Mobile: attached video of current standing and photo of what I'd like

I hope my explanation isn't too confusing. Thanks @tuanphan

 

Desktop.jpg

Mobile.jpg

Link to comment

Hi @tuanphan If this is too much of a hassle could you only help me get the following please

  • Announcement bar above sticky header
  • Burger on far left then customer sign in next to it
  • Clickable logo in the middle (mobile)
  • Bag on far right then search button next to it

Many thanks!

On 4/29/2024 at 3:51 AM, tuanphan said:
  • Announcement bar will be on top of header
  • Remove right navigation
  • Add a Search icon > Click Search will open search page then users can enter search keyword
  • Add a Cart icon (no cart quantity) > Click Cart will open cart page?

 

Link to comment

Try this code to Website > Website Tools > Custom CSS

@media screen and (max-width:640px) {
.sqs-announcement-bar {
    top: 0 !important;
    position: fixed !important;
    left: 0;
    width: 100%;
}
.mobile-bar-wrapper {
    top: 61px !important;
}
div#mainNavWrapper {
    position: relative;
    top: 40px;
}
}

 

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

Thanks @tuanphan that solved the announcement bar.

 

Could you check this code for me please? I'm sure I've made a mess  of it!

The header is sticky but the bag isn't and I can't workout how to remove navigation on the right (Home, Bespoke, Contact Us) Video attached.

Quote

@media screen and (max-width: 768px) {
  .tweak-mobile-bar-position-top-fixed .mobile-bar-wrapper {
    box-sizing: border-box;
  }
  header#header[data-nc-base="header"] {
    display: flex !important;
    position: sticky !important;
    top: 5px;
    right: calc(~"6vw + 32px");
    z-index: 99999 !important;
    margin-top: -30px;
  
  }
  header#header[data-nc-base="header"] .Icon--cart {
    width: 28px !important;
    height: 23px !important;
  }
  header#header[data-nc-base="header"] .site-header .Cart {
    font-size: 10px !important;
    line-height: 10px !important;
  }
  [data-nc-container="left"], [data-nc-container="centre"], #secondaryNavWrapper {
    display: none !important;
  }
}

 

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.