Supply Theme: Cart/Search on same line as Menu items?

originpnw
Tourist
8 0 1

Hi,

I would like the search and cart buttons to be on the same line as the menu items, and the "Sign in or Create an Account" links right above the cart button.

Also, would it be possible to reduce the overall size of the banner and have the logo closer to the menu items?

https://origin-pnw.myshopify.com/

password: auwaeg

originpnw_0-1619249484819.png

 

Any help would be greatly appreciated!

Thanks!

0 Likes
dmwwebartisan
Shopify Partner
5784 1323 1695

@originpnw 

 Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (min-width: 769px){
.site-header .search-bar {
    position: absolute !important;
    top: 45% !important;
    left: 69% !important;
    width: 20% !important;
}
.header-cart-btn { position: absolute!important;  top: 46% !important;}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
originpnw
Tourist
8 0 1

Hi @dmwwebartisan,

Thank you for your response! Unfortunately that did not work, it put the icons in the middle right of my website:

Screen Shot 2021-04-24 at 1.59.31 AM.png

0 Likes
dmwwebartisan
Shopify Partner
5784 1323 1695

@originpnw 

Remove old CSS code and add this new code .

 

@media screen and (min-width: 769px){
.site-header .search-bar {
    position: absolute !important;
    top: 22% !important;
    left: 69% !important;
    width: 20% !important;
}
.header-cart-btn { position: absolute!important;  top: 22% !important;}
}

 

 

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
originpnw
Tourist
8 0 1

Hi @dmwwebartisan,

Thank you for your help! I appreciate it.

I did some tweaking to your code:

@media screen and (min-width: 769px){
.site-header .search-bar {
    position: absolute !important;
    top: 17.5% !important;
    left: 61.75% !important;
    width: 20% !important;
}
.header-cart-btn { 
  position: absolute!important;  
  top: 17.5% !important;
  left: 81.75% !important;
}
}

 

 This got it to the right spot in the header, however there are some problems - I believe from the "absolute" positioning:

1.) The white space to the sides change with the size of the screen loading the page - and because of that, the placement of the search and cart move depending on screen size...they are not stuck in place on the header like everything else.

2.) When you click the cart button, a mini cart opens at the top of the page above the header and everything in the header moves down but the search and cart stay in the same place.

Screen Shot 2021-04-24 at 12.12.36 PM.png

Screen Shot 2021-04-24 at 12.18.26 PM.png

I was also hoping to move that "Sign in or Create an account" part right above the search and cart.

Thanks again for your support!

0 Likes