Small fix in header

Store Design
,

Topic summary

Header design adjustment to extend the vertical lines beside the logo and cart to the announcement bar/top and to the page start/bottom, and to center the header content.

Key actions and proposals:

  • Store link and password were shared so the layout could be reviewed. Screenshots illustrated the desired and actual results.
  • A CSS approach was suggested: edit base.css and, for desktop (min-width: 990px), set header padding and adjust nav.header__inline-menu padding and margins to control spacing/centering.
  • The user’s attempt added border-left/right and width: 100% to .header__inline-menu, but the lines did not extend fully.

Final fix and details:

  • Ensure the custom rules override theme defaults by adding !important to header padding (header { padding: 0 5rem !important; }) while keeping the nav.header__inline-menu padding/margins.
  • Media query used: @media screen and (min-width: 990px).

Outcome:

  • The user confirmed the solution worked and expressed thanks. No further changes were requested in this thread. The discussion appears resolved; images were central to understanding the expected layout.
Summarized with AI on December 25. AI used: gpt-5.
1

162052146b9283ec5e50ca50634474f8.png

Hello I’d like the lines besides the logo & cart to go all the way up to annoncement bar and all the way down til the page starts. I’d also like to be able to move them a little bit more to the center!

2

Hi @SamSukhoonNordl ,

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

1 Like
3

nattstudios.com

1234

1 Like
4

Is this final result you want ?

BSSCommerceTC_1-1720107549027.png
BSSCommerceTC_1-1720107549027.png1015×194 13.6 KB

BSSCommerceTC_2-1720107575434.png
BSSCommerceTC_2-1720107575434.png1906×126 9 KB

You can follow these steps:

Step 1: At store admin , go to Online store > Themes > Edit code and find the base.css file

Step 2: Insert below codes at the end of file and Save them.

@media screen and (min-width: 990px) {
    header {
      padding: 0 5rem;
    }

    nav.header__inline-menu {
       padding: 10px;
       margin: 0 10rem !important;
    }
}

I hope it will helpful with you!

We’re happy to support you. Can you give us a like or solution? This can greatly motivate us to contribute to our community.

1 Like
5

e56f95c45a26c5a0f3e427c5e34ed891.png

This became the result, not all the way :disappointed_face:

1 Like
6

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

}
@media screen and (min-width: 990px) {
header {
padding: 0 5rem;
}

nav.header__inline-menu {
padding: 10px;
margin: 0 10rem !important;
}
}

Here is my code right now!

7

Hi @SamSukhoonNordl ,

I was double check on your website , you just only add attribute important. It like that:

@media screen and (min-width: 990px) {
    header {
      padding: 0 5rem !important;
    }

    nav.header__inline-menu {
       padding: 10px;
       margin: 0 10rem !important;
    }
}
1 Like
8

You’re the best!

Appericate it, If you ever have the chance, please take a look at my “email” post.

I have removed the previous code i tested out so code is default in that post.

1 Like
9

Thank for your reply. We’re happy to support you. This can greatly motivate us to contribute to our community.