Design needs

Store Design
1

See pictures attached below -

I’d like to make my current header look like a new stripped down top bar. (I had the AI software make me the top bar. The shopping cart icon works, but the menu icon doesnt open anything/respond when clicking on it and cant be connected to anything)

How do I:

  • Change from search bar to search icon instead and remove other elements so its stripped down with hamburger menu (with “search” as one of the drop menu items) on one side and shopping cart with maybe customer profile on other side?

  • Then make new top bar sticky on every page and also mobile?

I’m currently using Hyper 1.3.3 by FoxEcom. Website is - https://upwardpacific.com/ THANK YOU IN ADVANCED!

WEB Needs THIS
WEB Needs THIS1202×1278 381 KB

4

to make it sticky try using this css code

.header__top {
position: fixed;
left: 0;
width: 100%;
z-index: 999;
background: #fff;
transition: top 0.35s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

5

Hey @upwardpacific try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
.header__bottom.color-scheme-info.relative.page-width.page-width--full {
    position: static !important;
    transform: none !important;
}
</style>
6

@upwardpacific

I checked your screenshot. It needs header code customization of the header file. We will have to change the placement of elements and write CSS code accordingly.

Hope you understand.

8

Hi @upwardpacific,

Go to online store > edit theme > access header > add custom css
*
.header__inline-menu {
display: none !important;
}*
.header__icon–menu {
display: flex !important;
}

Next step:

Go to edit code > base.css > paste this code


.header__search {
  display: none !important;
}


details-modal.header__search {
  display: block !important;
}

.header__icons {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

Save