Custom bar above and below navigation

You will be able to do this by altering your child theme stylesheet. If you are not using a child theme, directions are located here. To better answer your question it is easiest to see your website. Can you give us a link to your site please?

I do have a child theme

https://reginellabridal.com.c11.previewyoursite.com/

Your border above and below your navigation bar is controlled by your css selector:

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #004667;
border-top: 1px solid #004667;
/** other elements here **/
}

To change the way they look add this to your child theme stylesheet (replace [CAPITAL] with your own styles – more here about styling borders):

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: [WIDTH] [LINETYPE] [COLORCODE];
border-top: [WIDTH] [LINETYPE] [COLORCODE];
}

IF you want to remove them add this to your child theme stylesheet:

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border: none;
}

If you want to use a custom image, that is not fully accepted by all browsers, but here is a good write-up about using them.

I hope this helps.

Thank you for such a complete answer – exactly what I needed! I have advised my client accordingly and hope she stays with the line as this looks like it might be opening a pandora’s box when it doesn’t work in all browsers.

Really appreciate your taking the time to help out.

Sue

My pleasure. All the best.