Adding <hr> between dropdown menu items

Solved
Karam
Tourist
5 0 0

Hi, 

Like the title says, I'm stumped on this one. I wanted to add a horizontal line between each dropdown menu item. I can't seem to figure out how to do this. Can anyone help me/point me in the right direction? 

The theme that I am using is minimal. 

Thank you.

0 Likes
tony5280
Shopify Partner
61 6 18

If you specifically need an <hr> element, you would likely need to edit the code (or use jQuery to inject it after the DOM but that's kinda fragile).

If you just need the _appearance_ of a line, you should be able to do that with CSS. Are you familiar with the inspection panel in Chrome?

Karam
Tourist
5 0 0

I don't specially need the <hr> element. Just need a horizontal line separating the menu items. Also I am familiar with the inspection panel in chrome.

0 Likes
tony5280
Shopify Partner
61 6 18

Great, I'd suggest inspecting the element you want a line above, then editing the CSS in your browser until you have the desired effect, then copy your edits from your browser to your stylesheet. If you have a url you can share, I can give you an example.

Karam
Tourist
5 0 0

Hey Tony, I tried doing that previously, but I couldn't find the corresponding section in the code. Even tried pasting the modified line, but nothing as well. Here is a link to my test store where I kind of mess around with things: https://shophereteststore.myshopify.com/

0 Likes
Karam
Tourist
5 0 0

Ah sorry about that, try "ohmpee"

0 Likes
tony5280
Shopify Partner
61 6 18

This is an accepted solution.

is this what you are trying to do? https://imgur.com/a/i2p1Fu8 

if so, this is the CSS that will do it!

 

.site-nav__dropdown{
	/*override the previous settings here, which were 11px 30px 11px 0*/
	padding:0px
}
.site-nav__dropdown li {
    display: block;/*you already have this set*/
    padding: 11px 30px 11px 0;
    border-top: 1px solid grey;
}


From your Shopify Admin go to: online store > themes > actions > edit code
Find the folder titled Assets, then select theme.scss.liquid to edit and paste the CSS code at the bottom of the file

 

As an add-on to the answer above, To add CSS do this:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste the CSS code at the bottom of the file:


Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
Karam
Tourist
5 0 0

That is exactly what I was trying to do! Did you find the line item using the inspect console? Asking so I can understand the steps, so I do something like that myself one day!

Edit: It just finally clicked for me haha. I was looking at html the whole time. The items I needed to change was in the styles portion aka the css code. Wow, I can't believe I missed the obvious.

Also one question, so I added the same code to the minimal theme, instead of debut. Just adjusted a bit to add side borders. Also added in a line for border-bottom, to make the border under products the same as the rest. Only issue is that it thickens the two menu items, in the centre, borders because they now overlap. Is there a way to only make the change on the products category. Thank you!Screenshot 2020-10-16 102503.png

0 Likes