How to put a vertical bar “|” in my navigtion menu?

Shopify Discussion

Topic summary

A user wants to add a vertical bar separator (“|”) in their Shopify navigation menu, visible only on desktop, positioned between “Contact Us” and the search bar.

Solution Provided:

  • Navigate to Online Store → Theme → Edit code
  • Open Assets → base.css
  • Add CSS code at the top of the file using a media query for screens min-width 990px
  • The code creates a pseudo-element (:after) on .header__inline-menu with absolute positioning
  • Initial styling: 1px width, 20px height, black background (#000)

Follow-up Adjustment:
When asked how to make the bar bolder, the responder suggested increasing the width from 1px to 1.5px (adjustable to fit the website’s design).

The discussion appears resolved with working CSS code provided.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi,

How can I put a vertical bar “|” in my navigation menu (desktop only). I want to put “|” in the middle of Contact Us and search bar in the navigation panel.

URL - https://ausfin.in/

1 Like
2

Hi @Abhishek_Singh ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the TOP of the file:

@media screen and (min-width: 990px) {
    .header__inline-menu {
        position: relative;
        padding-right: 15px;
    }
    .header__inline-menu:after {
        content: "";
        position: absolute;
        top: 10px;
        right: 0;
        background: #000;
        height: 20px;
        width: 1px;

    }
}

PageFlyRichard_0-1678457401364.png
PageFlyRichard_0-1678457401364.png712×101 2.87 KB

I hope it would help you
Best regards,

Richard | PageFly

1 Like
3

Hey @PageFly-Richard ,

How to make it bold as well ? :grinning_face_with_smiling_eyes:

1 Like
4

Hi @Abhishek_Singh ,

You can replace previous your code by below code:

@media screen and (min-width: 990px) {
    .header__inline-menu {
        position: relative;
        padding-right: 15px;
    }
    .header__inline-menu:after {
        content: "";
        position: absolute;
        top: 10px;
        right: 0;
        background: #000;
        height: 20px;
        width: 1.5px;

    }
}

NOTE: You can change 1.5px to fit your website
I hope it would help you
Best regards,

Richard | PageFly

1 Like