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

[joshualev]

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/

[Zworthkey]

@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.

[joshualev]

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]

@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]

@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.

[joshualev]

@Zworthkey 

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

[AvadaCommerce]

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.

[joshualev]

@AvadaCommerce  

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

[joshualev]

@AvadaCommerce 

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

[AvadaCommerce]

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.

[joshualev]

@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

[AvadaCommerce]

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.

[joshualev]

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

[AvadaCommerce]

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)

[joshualev]

@AvadaCommerce  okay perfect no problem, last question ahah,

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

[AvadaCommerce]

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.

[joshualev]

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

[joshualev]

@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]

Hi @joshualev 

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

[joshualev]

@AvadaCommerce yes so it looks like all the other menu items

[AvadaCommerce]

Hi @joshualev ,

You can try my previous code as well:

@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.

[joshualev]

@AvadaCommerce this doesnt remove the font it just changes the size of the font smaller? i have already tried it, im unsure how to fix it?

[AvadaCommerce · 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;
    }
}

[joshualev]

@AvadaCommerce  thankyou for all your help! youre a star!

[Zworthkey]

@joshualev 

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

Add this code to reduce the font size.