How can I modify the header in Turbo Portland Theme?

Solved

How can I modify the header in Turbo Portland Theme?

MangusFA
Tourist
9 0 2

I wish to remove the black bar (top bar), and move the mini cart to the bottom bar, aligned in the middle with the text

 

Theme: Turbo Portland

e0a09c38192193c45a24ddfaa99b7872.png

Accepted Solution (1)
theycallmemakka
Shopify Partner
1673 400 419

This is an accepted solution.

Hi @MangusFA ,

 

There should be a </body> ? Please add this just above </body> tag 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 9 (9)

MangusFA
Tourist
9 0 2

Basically like this

7d29cdd56f2dc807bcf0ad4335cdc3a6.png

theycallmemakka
Shopify Partner
1673 400 419

Please provide link to you store.

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

MangusFA
Tourist
9 0 2

Kidcovey.com

theycallmemakka
Shopify Partner
1673 400 419

Hi @MangusFA ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </head> tag

<style>
@media only screen and (min-width: 830px) {
  .top-bar {
    position: absolute;
    right: 10px;
    bottom: 25%;
    background: transparent;
}
}
</style>

 

Result:

makkaomakka_0-1698855860840.png

 

 

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Makka

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

MangusFA
Tourist
9 0 2

There isn't a  </head> in the file. But it's a  <head> at the top. I tried inserting the code there, but it did not do anything. 

theycallmemakka
Shopify Partner
1673 400 419

This is an accepted solution.

Hi @MangusFA ,

 

There should be a </body> ? Please add this just above </body> tag 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

MangusFA
Tourist
9 0 2

Yeah, there was a </body> but there wasn't a </head>. Thank so you so much

suyash1
Shopify Partner
9883 1228 1568

@MangusFA - can you please share your page link?

To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30. | Support me

Dan-From-Ryviu
Shopify Partner
9725 1939 1976

Hi @MangusFA 

Did you go to your Online store > Themes > Customize > Header and check if there is an option to change the layout to fit your request? If it does not, then you will need to edit the code of your header file and  add some CSS code to make it look like your request

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.