Modify Header

NgocLe1
Excursionist
68 0 2

Screenshot 2024-04-14 094946.png

 

Can you please help me to move the phone number to the right and align with the navigation bar while also aligning horizontally with the logo? In addition, I would like to add a breadcrumb on the left, just like in the picture above. Thank you!

Here is the link to my site: https://2cb7cc-ab.myshopify.com/

Pass: testpage

Replies 6 (6)

PageFly-Amelia
Navigator
316 96 138

Hello @NgocLe1 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
.header__inline-menu {
   padding-top: 0 !important;
}

.announcement-bar {
   justify-content: right !important;
}
</style>

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

NgocLe1
Excursionist
68 0 2

Hi! The number moved to the right but it doesn't align with the navigation bar, plus it needs to move down to align horizontally with the top of the logo. Thanks!

PageFly-Amelia
Navigator
316 96 138

Hello @NgocLe1 

 

Can you add my code below to fix the alignment issue? I'm not sure what you mean by 'move down'. Could you please provide a screenshot of the position you're referring to?

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
.header__inline-menu {
   padding-top: 0 !important;
}

.announcement-bar {
   justify-content: right !important;
}
@media screen and (min-width: 990px) {
.utility-bar__grid {
   padding-right: 6.2 rem !important;
}
}

</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

NgocLe1
Excursionist
68 0 2

Screenshot 2024-04-14 094946.png

I want it align on the top with the logo and on the right with the navigation bar like the image. Thanks!

diego_ezfy
Shopify Partner
2967 571 899

@NgocLe1@NgocLe1, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (min-width: 750px){

.utility-bar {
    border-color: transparent;
}

[id] .announcement-bar {
   justify-content: right !important;
}

.header{
    padding-top: 0 !important;
}

.header__heading-logo-wrapper{
    display: block;

    margin-bottom: -40px;
}

.announcement-bar__message{
    position: relative;
    top: 40px;
}

.list-menu--inline > *:last-of-type > *{
    padding-right: 0 !important;
}
}

 

diego_ezfy_0-1713137484489.png



Ideally you'd want to trim that white space around your logo to make it fit better.


If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

NgocLe1
Excursionist
68 0 2

Hi! Thank you for the code! It works the way that I want, but the number is actually belongs to the announcement bar on top, so if now I delete the announcement bar which is the white space on top then the number would disappear with it. Is there any way that you can help me create an invisible text box so that I can type my phone number in right there?