WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Custom bar above and below navigation

[Resolved] Custom bar above and below navigation

  • Currently there is a horizontal line (bar) above and below my navigation area. I am wondering if there is any way to replace this line with a custom line, something decorative that I would create and could save as a jpg or png?

    Thanks
    Sue

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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?

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Custom bar above and below navigation’ is closed to new replies.
Skip to toolbar