Spacing between text issue: Dawn theme

Retired Boards Appdev Store Design
,

Topic summary

A user implemented a custom sliding navigation bar for mobile on their Shopify Dawn theme site but encountered a spacing issue. The navigation items are evenly spaced rather than adjusting dynamically based on text length.

Problem Details:

  • Navigation items have uniform spacing regardless of content length
  • User followed an online tutorial to create the mobile navigation
  • Included screenshot showing the spacing issue
  • Provided HTML and CSS code (appears partially corrupted/reversed in the post)

Current Status:

  • No responses or solutions have been posted yet
  • User is seeking CSS code to make spacing responsive to text size
  • The discussion remains open with the issue unresolved
Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hello Everyone,

I implemented a code to have a sliding navigation bar for the mobile version below the header in my website by watching an online video.

However, I am stuck in one problem. The spacing between the contents of the navigation is evenly spaced out and thus is not getting dynamically adjusted by the length of the text entered.

Can someone please help me with a code as to how can I space the content based on the text size of each word.

Any help is highly appreciated.

SohumLinen_0-1684600914834.jpeg
SohumLinen_0-1684600914834.jpeg196×400 13.5 KB

Website link- sohumlinen.com

Here is the HTML & CSS Code used to obtain this section:


  

    

      

                

    

       

          

            

[Bedsheets](https://sohumlinen.com/collections/bed-linen)

       

          

            

[Towels](https://sohumlinen.com/collections/bath-linen)

       

          

            

[Switchbot](https://sohumlinen.com/collections/switchbot)

       

          

            

[Wholesale](https://sohumlinen.com/wholesale)

       

          

            

[SwitchBot](https://sohumlinen.com/switchbot)

       

          

            

[SwitchBot](https://sohumlinen.com/switchbot)

       

          

            

[SwitchBot](https://sohumlinen.com/switchbot)

       

          

            

[SwitchBot](https://sohumlinen.com/switchbot)

       

          

            

[SwitchBot](https://sohumlinen.com/switchbot)

Css:

.sldOuter {
    width: 100%;
    overflow: hidden;
}.pb15 {
    padding-bottom: 0px !important;
}.sldRow {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    transition: all 0.2s ease;
    padding-bottom: 0;
    position: relative;
}.sldCol3_half {
    padding: 0 0px;
  padding-left: 20px;

    display: inline-block;
    vertical-align: top;
    width: 28%;
}.sldImgBox {
    width: 100%;
  margin-bottom: -10px;
  margin-top: -15px;
  text-decoration: none !important;
    height: auto;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}.sldImgBoxInner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    background-position: 50%;
    background-repeat: no-repeat;
}.sldImgBoxInner.sldImgOpcty {
  border: none !important
    opacity: 1;
}.sldImgBoxInner img {
    width: 100%;
    height: 100%;
    display: block;
}