Sticky header with logo, bag, search and burger

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!

Can you share site url? I think we can solve this with some simple CSS code.

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

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

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?

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

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?

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?

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

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