How do I reduce the gap in between each word in the navigation bar?

Solved
joshualev
Excursionist
71 0 10

 

How would i reduce the gap spacing between each word in the navigation bar so that i can add more titles/dropdowns in the menu? 

https://clair-de-lune.co.uk/

joshualev_1-1649058958977.png

 

Accepted Solution (1)

Accepted Solutions
AvadaCommerce
Shopify Partner
3033 696 566

This is an accepted solution.

Hi @joshualev ,

 

You can try below code:

@media (min-width: 1000px) {
    .nav-bar__linklist  li.nav-bar__item.last-nav-item {
        font-family: "Century Gothic", sans-serif !important;
        font-size: 15px !important;
    }
}

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

View solution in original post

Replies 24 (24)
Zworthkey
Shopify Partner
5581 640 1498

@joshualev 

@media screen and (min-width: 1000px){
.nav-bar__item {
    margin-right: 18px !important;
}}

@joshualev 
Add this code in the theme.scss or theme.css file.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
joshualev
Excursionist
71 0 10

Thankyou this is similar to what i was envisioning however they look very close to each other. 

Is there any chance you know how to put line marks in between each drop down? like this website does on their navigation bar? 

https://www.mamasandpapas.com/

joshualev
Excursionist
71 0 10

@Zworthkey 

Thankyou this is similar to what i was envisioning however they look very close to each other. 

Is there any chance you know how to put line marks in between each drop down? like this website does on their navigation bar? 

https://www.mamasandpapas.com/

Zworthkey
Shopify Partner
5581 640 1498

@joshualev 

.nav-bar__item {
    position: relative;
    display: inline-block !important;
    margin-right: 14px !important;
    border: none !important;
    background-color: transparent;
    padding: 0px 5px !important;
    font-size: 16px !important;
    line-height: 26px !important;
    line-height: 20px !important;
    border-right: 1px solid #b2b2b2 !important;
    padding: 17px 0 !important;
    height: 18px !important;
}
.nav-bar__inner {
    background: #e7e7e76b !important;
}

Try out this code.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
joshualev
Excursionist
71 0 10

@Zworthkey 

It looks like this when i paste that code? is there a way just to add lines in-between each word?  

joshualev_0-1649060835215.png

 

AvadaCommerce
Shopify Partner
3033 696 566

Hi @joshualev ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

@media (min-width: 1000px) {
    .nav-bar__item a {
        position: relative;
    }
    .nav-bar__item a:before {
        content: "";
        position: absolute;
        height: 80%;
        width: 1px;
        top: 10%;
        right: -17px;
        background: #bbb;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

joshualev
Excursionist
71 0 10

@AvadaCommerce  

Damn that looks nice however on the drop down the lines are in between each section like this?

joshualev_0-1649061667531.png

 

joshualev
Excursionist
71 0 10

@AvadaCommerce 

Would you be able to take the lines out in the drop down menu?

AvadaCommerce
Shopify Partner
3033 696 566

Hi @joshualev ,

 

You can try replace previous code by below code:

 

@media (min-width: 1000px) {
    .nav-bar__linklist > .nav-bar__item > a {
        position: relative;
    }
        .nav-bar__linklist > .nav-bar__item > a:before {
        content: "";
        position: absolute;
        height: 80%;
        width: 1px;
        top: 10%;
        right: -17px;
        background: #bbb;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

joshualev
Excursionist
71 0 10

@AvadaCommerce that is perfect thankyou, its looking great! 

One more question if i wanted to change my navigation bar to this specific one, how would i fit all the words on one line? here is the example below, as you can see its too long and they have gone on to the second line instead of all being on one line

joshualev_0-1649063941134.png

 

AvadaCommerce
Shopify Partner
3033 696 566

Hi @joshualev ,

 

Because your menu is so long, it's hard to leave it 1 line. If the distance is reduced, the items between items will be very bad

 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

joshualev
Excursionist
71 0 10

@AvadaCommerce  is it a possibility to reduce the font size? will this make it a possibility to fit it all on one line?

AvadaCommerce
Shopify Partner
3033 696 566

Hi @joshualev ,

 

Not likely, as this is insignificantly reduced. On a small screen, it is not possible to put on 1 row. But this problem does not affect, I checked on my monitor (13inch), it still shows fine (1 line)

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

Zworthkey
Shopify Partner
5581 640 1498

@joshualev 

a.nav-bar__link.link {
    font-size: 14px !important;
}

Add this code to reduce the font size.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
joshualev
Excursionist
71 0 10

@AvadaCommerce  okay perfect no problem, last question ahah,

how would i remove this font at the end of the nav bar?

joshualev_0-1649067067764.png

 

AvadaCommerce
Shopify Partner
3033 696 566

Hi @joshualev ,

 

You can try below code in theme.css file:

 

@media (min-width: 1000px) {
    li.nav-bar__item.last-nav-item {
        font-family: "Century Gothic", sans-serif !important;
        font-size: 15px !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

joshualev
Excursionist
71 0 10

@AvadaCommerce that just made the font smaller it didnt change the actual font

joshualev
Excursionist
71 0 10

@AvadaCommerce I cant figure it out, do you know how to change it? it seems like its over written somewhere, the font size changes but the actual font is the same?

AvadaCommerce
Shopify Partner
3033 696 566

Hi @joshualev 

 

Do you mean to adjust the font of that Blog like other menu items?

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE