Boarders around main navigation items

Highlighted
Excursionist
16 0 3

Hi there. I'd like to have boarders around the items in the main navigation so they appear in boxes. So far I managed to add a background but when I add boarders to the items it looks like this:

Screen Shot 2020-08-01 at 08.02.02.png

There shouldn't be an additional box in-between the items. My goal is this example: Every menu item in one box, wide (from the very left side to the very end of the right side) + that the last 2 items appear in a darker color:

Screen Shot 2020-08-01 at 08.37.51.png

Example: hygi.de 

Store URL: alfa24shop.de

Theme: Warehouse

 

Is that possible? I hope someone can help me with this. Thanks so much in advance!!

2 Likes
Highlighted
Shopify Partner
6238 909 2116

Hello, @Sandra123 

Welcome to the Shopify community!
and Thanks for your Good question.

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

 

 

@media screen and (min-width: 1000px) {
.nav-bar__item {
    border-left: 1px solid #fff;
    padding: 15px 10px;
margin: 0;
}
.nav-bar__link {
    font-size: 15px;
}
}

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Shopify Partner
1685 365 497

Hey @Sandra123 

Please add following code in your assets/theme.scss.liquid file.

@media screen and (min-width: 1000px){
.nav-bar__item {
position: relative;
display: inline-block;
padding: 20px 15px;
background: #dadada;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
}


Hope this works for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Excursionist
16 0 3

Awesome, thanks so much! It works great. I have one more question: Is it possible to prevent the main navigation into 2 lines?

And can I get the 2 items, marked with the red box in a darker color?

Screen Shot 2020-08-01 at 09.44.20.png

0 Likes
Highlighted
Shopify Partner
6238 909 2116

@Sandra123 

Thanks 

i have updated my code can you please check

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
16 0 3

Thanks for replying! The font size works fine. Just the solution for the 2 specific menu items is missing. They should appear in a darker background color (the ones marked in red on the screenshot and as shown in the example screenshot).

Is there a possibility?

0 Likes