-
AuthorPosts
-
July 27, 2023 at 2:08 pm #1414676
Hello,
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)Thanks!
July 30, 2023 at 7:08 pm #1414948Hey 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,
MikeJuly 31, 2023 at 9:55 pm #1415092Hi 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)….
https://img.savvyify.com/image/t9V7
https://img.savvyify.com/image/tync- This reply was modified 1 year, 4 months ago by karinkropik. Reason: screenshot seemed not to be visible
July 31, 2023 at 11:45 pm #1415099Hi,
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,
MikeAugust 1, 2023 at 1:06 pm #1415140Hi Mike,
sorry, I thought it would link directly to the plugin-info and I have overlooked it. So its basically this 3 codes (screenshot)?
https://img.savvyify.com/image/tsYUI 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?
Thanks!August 1, 2023 at 5:31 pm #1415185Hi,
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,
MikeAugust 3, 2023 at 3:21 pm #1415344This reply has been marked as private.August 3, 2023 at 5:23 pm #1415353Hi,
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,
MikeAugust 4, 2023 at 12:02 pm #1415415Hi 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!August 4, 2023 at 12:17 pm #1415419August 4, 2023 at 1:31 pm #1415428Ah, 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:
https://img.savvyify.com/image/tmr7
https://img.savvyify.com/image/tr8cAlso, for some reason when the tab is selected the box below changes slightly in size and is not consistent with the above border:
https://img.savvyify.com/image/t1RFAnd on the german Site the size difference is even bigger for some reason:
https://img.savvyify.com/image/tQSUThanks!
- This reply was modified 1 year, 4 months ago by karinkropik. Reason: Added another screenshot
August 4, 2023 at 5:31 pm #1415438Hi,
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,
MikeAugust 5, 2023 at 12:25 pm #1415577I understand. Thanks, that worked well!
August 5, 2023 at 8:15 pm #1415614Hi,
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,
Mike -
AuthorPosts
- The topic ‘Various adjustments in styling’ is closed to new replies.