Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 24, 2019 at 4:15 am #1058013
    ykaralis

    Hello,

    When I first created our single-page website based on the Enfold App demo, everything worked fine and, as per the example, all menu links were defined using only the ids of the corresponding colour sections (e.g. looked like this: #try_it).
    However, after we had to add a couple more pages, I was forced to define all menu links using the full URLs (they now look like: https://acme.com/#try_it) so that the menu worked on all pages. However this resulted in having, on the initial page, all menu items highlighted. I understand this happens because of the current_page_item which is applied on all menu items. How can I “disable” this class and have back the highlighting of a menu item only if the user is on the corresponding colour section (i.e. have highlighting affected only by the current_menu_item class which works fine)?

    Thanks in advance for your help!

    January 25, 2019 at 8:00 am #1058517
    Vinay

    Hey ykaralis,

    Thank you for contacting us.

    I checked your site to highlight the menu item please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
/* CSS - Current Menu highlight */

.current-menu-item {
    background: gold;
}

    Best regards,
    Vinay

    January 26, 2019 at 5:52 am #1059010
    ykaralis

    Hi Vinay,

    Thanks for your answer but highlighting the background of the menu option was not what I had in mind.
    I needed the menu to have the same look with the Enfold App demo, despite that I’m using full URLs (which trigger the current_page_item for all menu options) instead of anchor tags.

    Anyway, I managed to figure out a solution which behaves exactly like the menu in the Enfold App demo. Adding it here in case somebody else needs it:

    .header_color .main_menu ul:first-child > li.current_page_item > a {
  color: #c9c9c9;
}
.header_color .main_menu ul:first-child > li.current-menu-item > a {
  color: #000000 !important;
} 
.header_color .main_menu ul:first-child > li a:hover {
  color: #000000 !important;
}
    • This reply was modified 5 years, 10 months ago by ykaralis.
    January 26, 2019 at 10:25 am #1059083
    Vinay

    Hi,

    Thank you for sharing your solution.

    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.