Have spacing based on text length instead of fixed spacing

Store Design
, , , ,
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.

Screenshot 2023-05-20 at 1.12.46 AM.jpg
Screenshot 2023-05-20 at 1.12.46 AM.jpg720×1472 84.9 KB

Website link- sohumlinen.com

2

To dynamically adjust the spacing between the contents of your sliding navigation bar based on the length of the text entered, you can use flexbox and adjust the justify-content property. Here’s an example code snippet:

/* Assuming your navigation items are within a container element with the class "navigation-container" */
.navigation-container {
  display: flex;
  justify-content: space-between;
}

/* Adjust the spacing between the navigation items */
.navigation-container a {
  flex: 1;
  margin: 0 5px; /* Adjust the margin as per your preference */
}
1 Like
3

Here is the code that I had placed.


  

    

      

                

    

       

          

            

[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)

And here is the css for the same:

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

Can you please let me know where I should place the code that you suggested.