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?
1 Like
@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.
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?
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?
1 Like
.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.
It looks like this when i paste that code? is there a way just to add lines in-between each word?
Hi @joshualev ,
You can follow the instruction below:
- Go to Online Store->Theme->Edit code
- 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.
Damn that looks nice however on the drop down the lines are in between each section like this?
Would you be able to take the lines out in the drop down menu?
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.
1 Like
@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
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.
@AvadaCommerce is it a possibility to reduce the font size? will this make it a possibility to fit it all on one line?
1 Like
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)
a.nav-bar__link.link {
font-size: 14px !important;
}
Add this code to reduce the font size.
1 Like
@AvadaCommerce okay perfect no problem, last question ahah,
how would i remove this font at the end of the nav bar?
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.
@AvadaCommerce that just made the font smaller it didnt change the actual font
@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?
Hi @joshualev
Do you mean to adjust the font of that Blog like other menu items?