Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 27, 2023 at 10:32 am #1426513
    Monika

    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
    Monika

    November 28, 2023 at 1:32 am #1426573
    Nikko

    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,
    Nikko

    November 29, 2023 at 3:15 pm #1426713
    Monika

    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?

    cheers
    Monika

    November 30, 2023 at 7:50 am #1426767
    Nikko

    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,
    Nikko

    November 30, 2023 at 3:24 pm #1426805
    Monika

    Hey Nikko,

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

    cheers
    Monika

    December 2, 2023 at 1:23 pm #1426954
    Mike

    Hi,
    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,
    Mike

    December 2, 2023 at 6:01 pm #1426971
    Nikko

    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="http://www.w3.org/2000/svg" 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>
</svg></div>

    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.

    Regards,
    Nikko

    December 7, 2023 at 1:18 pm #1427450
    Monika

    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.

    Cheers
    Monika

    December 8, 2023 at 1:22 am #1427505
    Nikko

    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,
    Nikko

    December 21, 2023 at 7:40 pm #1428690
    Monika

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

    Thank you very much!!

    December 22, 2023 at 12:49 am #1428700
    Nikko

    Hi Monika,

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

    Best regards,
    Nikko

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