S_R_HRTWL

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

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?

Thank you!

I did it and this was the result unfortunately @tuanphan

Also, is it possible to make the burger a drop down menu containing main navigation buttons without cart and customer account instead of going to a separate page?

I noticed the background is zoomed in quite a lot on mobile view when not on home page. is it possible to set it to the same zoomed out size for the whole website on mobile view please?

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

Awesome!! Thanks! @tuanphan

Is it possible to apply it to all pages? It works perfectly on home page thank you @tuanphan

That'd be awesome. Thanks @tuanphan. URL below:

https://www.road-from-damascus.co.uk/

@tuanphan sure. Thank you.

https://www.road-from-damascus.co.uk

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!

Hi @tuanphan  for main content only please. 

Hi @Web_Solutions I've used this code and it finally worked with some tweaks, however, the cart icon is disproportionately big. is there a tweak code to change its size please?

Hi, is there a way to add a background image to York template home page?

example below:

https://www.papercityfabrics.com/shop

Thanks!