Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #1426513

    Hey there,
    iI am building a playfull website for a Kids Product.
    I seperate all color sections with mountain Dividers, so it does not look to “hard”.

    But one thing still does not fit:
    the hard, horizontal shape of the menue bar. I would love to make is more smooth. Perhaps a slight wave or also the same Mountain Shape like the svg Dividers.

    How can I change it?

    Thanks for your help


    Hi Monika,

    Can you try to add a top svg divider on the first section of the page? then set the color of the divider similar to the background color of the menu bar and the opacity set to 1?
    Hope this helps.

    Best regards,


    Hey Nikko

    thanks for your answer, but that does not help because i use a sticky header.
    So When the user scrolls, then they see this hard line which I want to avoid.

    Is there no other possibility to change the shape of the Menu bar?



    Hi Monika,

    There’s no option for it as well.
    Are you using a child theme? I think we can try to override the header and try to make some modifications for it.

    Best regards,


    Hey Nikko,

    Yes I am using a Child Theme.
    What can I do?
    I would like a slight wave



    Perhaps this can be done with some javascript, please include an admin login in the Private Content area so we can examine closer.
    I assume that you want this for all pages, correct?

    Best regards,


    Hi Monika,

    In your child theme please do the following:
    1. Create includes folder.
    2. Copy helper-main-menu.php from (parent theme) wp-content/themes/enfold/includes/ and paste it to wp-content/themes/enfold-child/includes/ folder.
    3. Edit helper-main-menu.php (child theme) and scroll to the bottom, find this line of code:
    <!-- end header -->
    Above it put this code:

    <div class="avia-divider-svg avia-divider-svg-mountains avia-divider-svg-bottom avia-svg-original"><svg xmlns="" viewBox="0 0 1000 100" preserveAspectRatio="none">
    	<path opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
    	<path opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
    	<path d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>

    4. Save.

    In your WordPress Dashboard, do the following:
    1. Go to Enfold > General Styling
    2. In Quick CSS, add this CSS code:

    #top #header {
        padding-bottom: 30px;
    #top #header_main {
        background-color: #ceecfe;
        border-bottom: 0;
    #top #header .header_bg {
        background-color: transparent;
    #top #header .avia-divider-svg {
        position: absolute;
        bottom: 0;
        left: 0;
    #top #header .avia-divider-svg-bottom svg {
        fill: #ceecfe;
        height: 30px;
        transform: translate(-50%) rotate(180deg);

    Hope this helps.



    Thank you Nikko,

    i just made everything you said (It is correct, that I put the Php Code above(!) the line “<!– end header –>”, right?
    See Screenshot below.

    The rest I also made, but sadly nothing happens.



    Hi Monika,

    Yes that is the correct place.
    Can you setup a staging site for us? basically it’s a duplicate of your live site, just so we can check further and make changes without causing any issues on your site visitors/users.

    Best regards,


    Hi Nikko, sorry I put the Folder on the wrong server ;)
    Now It works!

    Thank you very much!!


    Hi Monika,

    I’m glad that we could help you :)
    Thanks for using Enfold and have a great day!

    Best regards,

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Custom Menu-bar Shape’ is closed to new replies.