Navigation Bar Scallops

Home Forums Automattic Flora and Fauna Navigation Bar Scallops

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #107604 Resolve


    I like the scalloped on the navigation bar and footer when the default theme is selected. However, when I customize the colors, the scalloped edge goes away. Is there a way to change the color from the default and keep the decorative edge?

    The blog I need help with is


    Hi there,

    The scalloped edges are designed to not display when custom colors are active. This was done because it’s not possible for the edge’s colors to automatically change along with the color of the navigation bar.

    If you would like to keep the edge, it is technically possible to add it back with CSS, but it will require you to manually edit the ruffle image in an image editor (such as Photoshop) to change it to the color you want, upload it to your media library, and then set it as the background of the menu area using CSS. Here’s the original ruffle image that you can download and save to your computer.

    If you want to give this a shot, let me know and I will provide you with the steps and walk you through the process.



    Thank you michiecat. I have downloaded the ruffle image, changed the color and uploaded it into my media library. I’d love to know the steps for adding the ruffle to the navigation bar and footer. Thanks!



    Howdy. You’ve already done the bulk of the work! The last step would be to add the following to your Custom CSS editor:

    .site-footer:before {
    background-image: url('');
    .navigation-main:after {
    margin-top: -0.1em;

    Let me know how that works for you or if you have any questions.



    Thank you so much michiecat. It’s really starting to look the way I want it to with your help!



    You’re very welcome! Your site looks great. Are you all set with the scallops? If so, I will resolve this topic. If you have any other questions, please feel free to post it a new topic.



    Yes I am. Thank you.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Navigation Bar Scallops’ is closed to new replies.