Navigation Bar changing color keeping ribbon end.

  • Resolved Carlee Christensen

    (@carlee-christensen)


    10 years, 1 month ago

    I am trying to change the color of the navigation bar, and ribbon ends. We used the following CSS we found in this forum.

    .nav {
    background: #11D3D6;
    }

    .nav:before, .nav:after {
    border: 1.6em solid #11D3D6;
    }

    It changed the colors but also changed the navigation bar, so it did not have the ribbon ends, any suggestions?

Viewing 10 replies - 1 through 10 (of 10 total)

  • Can you post a link to your site?

    Thread Starter Carlee Christensen

    (@carlee-christensen)

    https://www.theladybirdpress.com

    Thank you

    You need to duplicate all the CSS for the ribbon ends. Since you already have a custom CSS plugin, try using this code:

    .nav {
background: #11D3D6;
}
.nav:before, .nav:after {
border: 1.6em solid #11D3D6;
}
.nav:before {border-left-color: #fff; border-right-width: 1.4em; left: 0;}
.nav:after {border-left-width: 1.4em; border-right-color:#fff; right: 0;}
    Thread Starter Carlee Christensen

    (@carlee-christensen)

    That did it, thank you so much!

    Thread Starter Carlee Christensen

    (@carlee-christensen)

    How would I repeat that for the footer? Would I just have to go Section. container.,footer, and repeat the same?

    The footer credit is a bit more complex:

    p.footer-copy :before,
p.footer-copy :after {border: 1.8em solid #11d3d6;}
p.footer-copy {background: #11d3d6; color: black;}
p.footer-copy a {color: black;}
p.footer-copy :before {border-left-color: #fff; border-right-width: 1.4em; left: 0;}
p.footer-copy :after {border-left-width: 1.4em; border-right-color:#fff; right: 0;}

    Unfortunately, the BluChic link is done via an image, so it’s a bit more complicated to make it look right against the teal color.

    Thread Starter Carlee Christensen

    (@carlee-christensen)

    Thank you so much for all of your help,it looks perfect, and I definitely could not figure that out on my own.

    Hi will this code (header and footer ribbons) also work in the twentytwelve theme. I have just started complete customisation as it’s more of a blank canvas. However, I do love the ribbon navigation bar and wanted to replicate it. Thanking you in advance.

    @s4lmam3ah

    Hi will this code (header and footer ribbons) also work in the twentytwelve theme.

    No, CSS only styles HTML elements – so your theme would need to have the identical HTML for the CSS to work. Very unlikely to be the case.

    Thanks WPyogi. Sorry about the late reply, I don’t seem to be getting notifications.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Navigation Bar changing color keeping ribbon end.’ is closed to new replies.