Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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;
}
}
@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?
.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:
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.
Damn that looks nice however on the drop down the lines are in between each section like this?
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.
@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?
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)
@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 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 ,
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.
@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?
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;
}
}
a.nav-bar__link.link {
font-size: 14px !important;
}
Add this code to reduce the font size.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024