Modify Header

[NgocLe1]

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

[PageFly-Amelia]

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

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[NgocLe1]

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]

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

[diego_ezfy]

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

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]

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?

[NgocLe1]

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