Dawn Add a Div Text Box Between Header Menu and Header Icons

Store Design
, , ,
1

I want to add some Div Text, which I can Center Between:

(a) the Upper Left Menu, and

(b) the Upper Right Icons (Account Icon and Shopping Cart)

The following attempt did not work.

I tried adding

Hello
between the two items, and it places the Hello Text somewhere in the bottom left of the Header. HTML/CSS is shown with orange boxes.

How can I insert text in the Header, and make it Centered?

Please show actual Dawn html/css code, and not just general html/css from tutorials.

I’m very familiar with html/css, but trying to find the minimal code needed to edit Dawn theme.

JohnAllen439_0-1743571722379.png
JohnAllen439_0-1743571722379.png1882×474 74.1 KB

2

Hi @JohnAllen439 ,

share your store url and password if password protected.

thanks

manoj

3

hi, please try the regular Dawn theme, which I installed on February 2025

4

Hey @JohnAllen439 ,

To insert text in the header and center it between the left menu and right icons, follow these steps:

  1. Structure Your HTML Properly:

Ensure your header has a flexbox container with three sections:

  • Left(menu)

  • Center(you text)

  • Right(icons)

Modify your header structure like this:
  1. Use CSS to Align Everything Properly:
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    background-color: #76866d; /* Adjust to match your theme */
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
}

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 18px; /* Adjust as needed */
    font-weight: bold;
}

This should correctly position your “Hello” text in the center of the header. Let me know if you need further adjustments!

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,
Rajat

5

hi, do you have an example website?
I’m very familiar with CSS flexbox, but do you have code edit of Shopify website? thanks

6

@JohnAllen439 ,

Yes, I do have example websites! Since you’re already familiar with CSS Flexbox, I can help tailor a solution for your Shopify store. Feel free to DM me using the contact details in my signature, and we can go over the specifics together. Looking forward to helping you!