Hi Mike, the website is currently on my desktop only (on the app Local). i’ll share a link when its nearly finished.
animation in menu: the menu i shared has a small hoover over effect on the text. How do I achieve for example a colour change and underlining in white for the url that is active?
Size of menu: the example menu has the same width as the content under it, till it gets too small and changes to a hamburger menu. How do I achieve this? I think Enfold could really use some more menu options, such as the one i’m exploring now, as i’ve build several enfold sites and I’m really looking to achieve something a bit different than all the other enfold sites (i and others) have build, but still remain loyal to the enfold theme/team.
Hi Rikard,
thanks for your fast reply!
That works nice with the font-family and the font-size.
But i’m not able to reduce the space above and below the text-block?
I tried to change:
padding-top: 12px;
padding-bottom: 8px;
but it does not change as on the screenshot?
kind regards
Jak
Hi,
Please try this CSS instead:
#main .avia_textblock.text-about {
margin-top: 0px;
padding-top: 12px;
padding-bottom: 8px;
font-size: 18px;
font-family: zen-kaku-gothic-new;
font-weight: 500;
}
Best regards,
Rikard
Sorry, sure…
I just saw, that i can’t add links to special heading. So i changed it to a text-block with links.
How can i use the same css for the text-block instead of the special heading (i added the class “text-about” in developer settings for this text-block)?
#main .container_wrap_first .av-special-heading.custom-class {
margin-top: 0px;
padding-top: 12px;
padding-bottom: 8px;
}
and also use this css for the font-style too:
font-size: 18px;
font-family: zen-kaku-gothic-new;
font-weight: 500;
Sorry for my confusion.
kind regards
Jak
-
This reply was modified 1 year, 8 months ago by
Jak73.
Hey Jak73,
Like this:
#main .container_wrap_first .av-special-heading.custom-class {
margin-top: 0px;
padding-top: 12px;
padding-bottom: 8px;
}
custom-class is your custom class
Best regards,
Mike
Hi,
i’m trying to add css for a special headings to specific pages. Other pages will have another css settings.
So I would like to give different css for the special heading on different pages.
I think the best way would be, to add a class to the specific special header in the developer setting, right?
But how can i add a class to the css-code below, so it targets the specific special heading element?
#main .container_wrap_first .av-special-heading {
margin-top: 0px;
padding-top: 12px;
padding-bottom: 8px;
}
kind regards
Jak
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#top.page-id-317 #wrap_all #main #av_section_1.avia-builder-el-first {
border-top: 10px solid #000;
border-bottom: 10px solid #000;
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hi,
When I check your page it looks like you have this custom css:

try changing the top:41%; to top:27%;
and you have this custom css:

try changing the top:16px; to top:21px;
Best regards,
Mike
Hi,
You can replace color: var(–enfold-header_replacement_menu_color); with a color, no problem.
The word “logo” should be hidden by the css, I would have to see the page.
There is no animation built in to it, your example menu has no animation.
Your example menu changes to a different style at smaller screens, I only looked at the desktop version.
Best regards,
Mike
Hi,
Change the precious css to this:
.av_toggle_section .toggle_icon:before {
content: url(https://test.w-bullinger.com/WB-Reader-Arrow.svg);
top: -10px;
position: relative;
}
.av_toggle_section .activeTitle .toggle_icon:before {
content: url(https://test.w-bullinger.com/WB-Reader-X.svg);
top: -10px;
position: relative;
}
.av_toggle_section .toggle_icon {
border:none;
}
.av_toggle_section .toggle_icon .vert_icon,
.av_toggle_section .toggle_icon .hor_icon {
display:none;
}
and adjust the top: -10px; to suit.
Best regards,
Mike
Hi,
Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
Rikard
Hi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
#av-burger-menu-ul .menu-item-2029 {
margin-bottom: 10px;
}
#top .av-menu-button > a .avia-menu-text {
border-radius: 5px;
}
Best regards,
Rikard
We are creating a new site.
Problems arise when a page contains a lot of images and is long.
When I Edit the page and click update,
“Update failed. The response is not a valid JSON response.”
message appears at the top of the page. I can’t edit the page.
Please check it.
I have one more question. Are there any restrictions on the size of the page I can create if I do not enter a purchase code?
Hey Clemens,
I see that you are running an old version of the theme, could you try to update to the latest version (6.0.2) to see if that helps please? The update to 6.0.2 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/
Best regards,
Rikard
Hi at all,
I’m using your theme in one of my clients website. I use the version: 4.4.
I now needed to update PHP to Version 8.3.
I made a copy on another server to test the upgrade
the I want to go to the login I receive the following message:
“Fatal error: Unparenthesized a ? b : c ? d : e is not supported. Use either (a ? b : c) ? d : e or a ? b : (c ? d : e) in /home/.sites/97/site938/web/ksk/wp-content/themes/enfold/functions-enfold.php on line 313″
I read on an old tread, (https://kriesi.at/support/topic/fatal-error-unparenthesized-a-b-c-d-e/) that a upgrade to v4.8.8 could solve the issue….
Is there a possibility to get a download link for this version?
Best regards,
Clemens
This reply has been marked as private.
Hi,
To add the classes to the menu items, first enable them in the drop down at the top of your menu screen “Screen Options” and checking the CSS Classes box, which will show the classes to the menu items.

I added the shortcode in a code block element, in a color section so the page would have a full image background, but you could add the code block element to the top of your page.


Best regards,
Mike
This reply has been marked as private.
Hi Rikard,
Thanks for your reply.
Below 2 links:
1. The adobe link with the design I have to create >> there are multiple lines in the design: 2 black ones, at the top and bottom of the header. 1 orange line above the footer which is, I think, 10px.
2. The other link is the new page >> The black lines in the header are now part of the photo but I prefer to make them as lines in Enfold.
Hello Mikle, thank You fior the feedback. To avoid issues later, using the child theme would be wiser – despite I do not really catch what is the difference between both solution as a matter of coding – I’m not a developer / coder. Would you have a step by step child theme installation link to provide? Regarding the theme 6.0.2 I tried to install witout sucess – as I get a message prompting me that the “folder allready exists” – the process stopped. Any idea how to bypass the issue?
Best regards
Christian
Hi Mike, thanks for your quick and detailed response.
I’ve followed all your steps, but I have two problems:
1. I don’t see the possibility to add css to menu elements.

2. where to add the shortcode? As a codeblock/shortcode on top of the page in the editor?
or on the bottom of the page builder? 
Hello! We have the same issue on iOS devices (iPhone / iPad) in Chrome and Safari browser.
The issue is not resolved as written in https://kriesi.at/support/topic/accordion-header-issue-since-enfold-6-01/
Opening a accordeon / toggles causes flickering and a permanent reload of the page.
I’ve updated the JS files and the theme itself (currently running 6.0.2) and I turned off caching modules, but the issue is not solved.
I created a simple page to test it (find it in private content)
Any idea?
Thanks in advance!
Nicolas
Hi,
Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
Rikard
Hey reqonsult,
Thank you for the inquiry.
We can only reproduce the issue when zooming out the browser to 50% on a 2560x1440px screen resolution, which is equivalent to a resolution of 5K. Most users use 4K monitors at most. If you find this issue troublesome, you can add this css code.
#top div .av-section-color-overlay {
background-repeat: no-repeat !important;
background-size: cover !important;
}
Best regards,
Ismael
Hey strumpumpel,
Thank you for the inquiry.
is in mobile device check in the browser deeper as in my live iphone 11 phone.
What do you mean by “deeper”? Are you trying to adjust the position of the burger menu? If so, you can try this css code:
span.av-hamburger.av-hamburger--spin.av-js-hamburger {
top: -5px;
position: relative;
}
Best regards,
Ismael
Hi Gunter,
I’m continuing this here as it’s probably more appropriate, but our last communication on it was in this thread:
First of all, thanks so much again for working on the category banner images for Woocommerce categories, it’s a big win for our clients.
However I think I have found two bugs (unless I’m missing something). This is on the latest 6.0.2 version.
1. In the Theme > Shop Options section I enabled a Shop Banner Image, tested it on the front end, noticed a problem (which is point #2), and then removed the image from these settings and resaved the theme options. However now, even though no image at all is set in the theme options, each category is pulling in the most recently uploaded image on the website and using that as the banner for each category that doesn’t have an individual image set for it. See private #1 for examples.
2. It seems that the images selected are hardcoded to load in at 1500×1500 for some reason? I am loading up panoramic images but they keep just displaying as 1500×1500 regardless. Even in the Shop Banner Image section in Theme Options I have the option when selecting an image to choose it’s size (which I don’t seem to have for individual categories) but even this one loads in square. See #2 in private for example.
Thanks Gunter for your work on this, hopefully these quirks aren’t too painful to work out.
Tim.
-
This reply was modified 1 year, 8 months ago by
THP Studio.
-
This reply was modified 1 year, 8 months ago by
THP Studio.
Hello Mike, thanks for update and explanations about the process. I have tried to udpate to the latest version of Enfold, but it says that the destination folder allready exist. Any suggestions to solve the issue? Regarding the coding PHP, I’ve aksed to the developper who did the coding for the first version of the website including WP Layerslider on top of menu bar ( 5 to 6 years ago) and he found out some trace of “BROZERMO” coding tagged in the following files template-buider.php or search.php to execute shortcode like [av_layerslider id=…]. I’ll set up a staging website. There are 2 yearly licenses plug-ins Ninja Forms and EventOn. WP Layerslider 6.xxx is the last free udpate activated. Last but not least, what would be the cost for the PHP coding part? Best regards Christian
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
.togglecontainer p.toggler {
border-top: 1px solid #000 !important;
border-bottom: 1px solid #000 !important;
}
Best regards,
Mike
Hi,
Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
Rikard
Hi,
Great, I’m glad to hear that you got things working. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
Rikard