Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #1414676


    I need help with the following issues:

    1) I want to remove the circle from the active tab in the main menu header and instead show a different colour on hover and when it is clicked (the same as it is used/shown in the mobile view, a lighter orange colour than the default colour)
    2) I want to reduce the size of the mega menu (“Triest” and “Crete” under Hiking retreats and trips; and also the font size – I found some older codes for quick CSS but they do not work anymore since I have the latest version of Enfold installed)
    3) On the first page with the transparent header, I want to show the mega menu title fonts also in white (without the red background)
    4) With which code can I keep the different font colours/font styles in my headers? The layout partly broke since I have installed the latest Version of Enfold; example: like in hiking retreas & trips; & trips is in orange colour (this styling was used on most of my pages, but when I now go into the pages it shows the red warnings that layout will break with the old codes – in some pages I just took another heading to be able to show it but now it is only orange and not in two colours/font styles; like the heading currently in hiking-retreats-trips/crete/: I would like Crete Hiking Retreat in brown and the date in orange colour)



    Hey karinkropik,
    Thanks for your patience and the link to your site.
    1) after removing the circle from the active tab in the main menu, the lighter orange colour do you want it to be background color or the text color?
    2) try unchecking the “use as mega menu” option from the “Triest and Crete” under Hiking retreats so it is a regular menu item
    3) same as 2)
    4)to create this warning you already have the Special Character Translation plugin installed:
    so the code you would use to replace the HTML arrows > < is:

    ###lt###		=> <
    ###gt###		=> >

    like this:
    Our favourite ###lt###u class=special-type hiking###gt###selection###lt###/u###gt###
    Please note that there are no quots around the class name, I did this for you on your /tours/ page
    try this on your other pages and be sure to clear your cache plugin “purge cache”

    Best regards,


    Hi Mike,
    thanks. I don’t understand how the Special Character Translation plugin works. It has no settings – where can I find a documentation of how it can be used?

    The thing is, if I don’t use the mega menu, it looks horrible with the circle around the titles – it breaks the design (screenshot). It looks ok first, but once you click the tab hiking retreats and trips the circle appears and also around Trieste and Crete. I don’t understand why the circle automatically appears for the tab plus the items below. So this is also one of the reasons I wish to have it removed. I want the lighter orange colour for the background of the active tab (I think if I use it for the text colour it will not be visible enough)….

    • This reply was modified 10 months ago by karinkropik. Reason: screenshot seemed not to be visible

    To read about the plugin see our documentation for Using special characters
    I installed this for you in your other thread and in this post.
    Did you try to add the code to your other pages?
    ###lt###u class=special-type###gt### ... ###lt###/u###gt###
    change the “three dots” to the word you want orange.

    Best regards,


    Hi Mike,
    sorry, I thought it would link directly to the plugin-info and I have overlooked it. So its basically this 3 codes (screenshot)?

    I have not yet tried to add the code you gave me but know it will work since I just have to copy-paste. It was more about knowing which code I have to use when. But if I understood correctly I can search for a regular html code and then make the changes according to the plugin-list – right?


    Yes basically, the translation.txt at the plugin GitHub page shows these:
    but you real only need to use the “less than” = < and the "greater than" = > that makes your HTML code.
    So for your headings use ###lt###u class=special-type###gt### ... ###lt###/u###gt### and change the “three dots” to the word you want orange.
    I would not use any “search & replace” if that is what you mean.
    I would only manually change the HTML that you have in elements when you see the red warning like in this screenshot

    Best regards,

    This reply has been marked as private.

    This is the css in your Quick CSS adding the circle around the menu item:
    so you could remove this from both of your languages and clear your cache plugin.
    To add your light orange background color to the active menu item, go to Enfold Theme Options ▸ Advanced Styling and add a second Main Menu Links from the drop down option
    and then check Apply only to active state and add your background color, you will need to do this for each language and then clear your cache plugin.

    Best regards,


    Hi Mike,
    thanks, that worked well :) Could you possibly also tell me what to do to show the lighter color only on the letters for the active tab? Thanks a lot in advance!


    Glad this helped. Do you mean that you change your mind and want the active menu text to be the light orange color instead of the background color?
    If so change the above options for each language and remove the Background Color and add the Font Color

    Best regards,


    Ah, this makes sense. I tested it but it doesn’t look good. I stay with the previous option. Is there a way to make the submenu items also in the lighter orange colour when the main menu item is active? It would be more consistent. Currently only the main tab shows the colour. As well, I noticed some differences in size – for some reason, under Tips and Tricks, “Why hiking” is in a bigger box than e.g. Triest and Crete, which has the size of the above Title Hiking Retreats & Trips. See screenshots:

    Also, for some reason when the tab is selected the box below changes slightly in size and is not consistent with the above border:

    And on the german Site the size difference is even bigger for some reason:


    • This reply was modified 9 months, 4 weeks ago by karinkropik. Reason: Added another screenshot

    All sub-menus are set to a minimum width of 208px, they are not based on the parent menu item width.
    In your German language the words are longer so the parent menu items are a different length.
    To change the background color of the active sub-menu try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top #wrap_all #header #avia-menu.av-main-nav>li.current-menu-item>ul a {
    	background-color: #fb8702;

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,


    I understand. Thanks, that worked well!


    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Various adjustments in styling’ is closed to new replies.