Small design add in HEADER!

Store Design
, ,

Topic summary

Goal: Add vertical black bars in the site header (per attached image) on Nattstudios.com, positioned closer to the center.

Initial attempt: CSS added to .header__inline-menu (border-left/right: 1px; width: 100%; text-align: center) within a min-width: 990px media query.

Result: The vertical lines did not extend fully up/down, and alignment toward the center was not achieved.

Follow-up 1: Proposed removing header padding (padding-top/bottom: 0) to help borders reach the edges. The requester declined, wanting taller lines without making the header smaller.

Follow-up 2: Proposed adjusted paddings (header padding 16px; inline-menu padding 8px). Testing showed no improvement; the lines still weren’t tall enough.

Current status: Unresolved. The requester wants the black vertical lines to be taller (full height) and more centered, without changing overall header size. The reference image is important to understand the visual target. No final CSS solution or decision reached; next steps remain open.

Summarized with AI on December 25. AI used: gpt-5.
1

Hello! I’d like to add black bars in the header as the picture shows below!

banoo.png

Here is my site!

Nattstudios.com

Code 1234

1 Like
2

@SamSukhoonNordl

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (min-width: 990px) {
    .header__inline-menu {
        border-left: 1px solid #000 !important;
        border-right: 1px solid #000 !important;
        width: 100% !important;
        text-align: center !important;
    }
}

Thanks!

1 Like
3

34ec2bb2b2a2f0c41c4c27c3cdb60334.png
34ec2bb2b2a2f0c41c4c27c3cdb60334.png1887×128 5.63 KB

The lines didn’t go down/up all the way, also I want it more towards the center! :slightly_smiling_face:

4

@SamSukhoonNordl

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (min-width: 990px) {
    .header {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
}
1 Like
5

I’d rather not make the header smaller but the lines longer.

6

@SamSukhoonNordl

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (min-width: 990px) {
    .header {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

       .header__inline-menu {
        padding: 8px !important;
    }
}
1 Like
7

Tried it, didn’t solve the problem!

8

As I said, I’d like to make the black lines taller not change the header size!