Remove Highlighting from Main Menu Link for Posts

Hey acelam714,
The reason the “Blog” menu link is highlighted when you click a “post” is because “Blog” is a parent item, it is also the parent of the “Dubai” post.
If I understand correctly you don’t want any post to highlight “Blog”, do you want page or pot to highlight “Destinations” or any other menu items?
If changing the setting at Theme Options > Where to Display the Blog > Blog solves this why do you not want to do this?

Best regards,
Mike

Hi,
To solve the highlighting of Destinations when on the “United Arab Emirates” page, add this css:

#top #header .av-main-nav > li.current-page-ancestor > a .avia-menu-text,#top #header .av-main-nav > li.current-page-ancestor > a .avia-menu-subtext {
    color: #109bc5
}
.avia-menu li.current-page-ancestor {
    background-color: #f2f3ff;
    border: 1px solid #ffffff!important;
    border-radius: 100px !important
}

But to not highlight the blog menu item on all post pages we can remove the “current-menu-item” class from the menu item.
Try adding this code to the end of your functions.php file in Appearance > Editor:

function remove_blog_highlighting(){
  ?>
  <script>
(function ($) { 
  $(window).load(function() {
       if ($("body").hasClass("single-post")) {    
          $("#menu-item-1115").removeClass('current-menu-item');
      } else {
    }
  });
  })(jQuery);
<?php
}
add_action('wp_footer', 'remove_blog_highlighting');

Best regards,
Mike

Hi,
Glad to hear the Destination highlight works perfectly, I think the issue was that it was a parent and a ancestor, but glad it’s sorted out.
As for the script, I would need to login and see, because when testing your page it works. Perhaps when you copied it you got curly quotes.

Best regards,
Mike

Hi,
To have “Destinations” highlighted when on any post, instead of the “Blog” please try this css:

#top.single-post .avia-menu li.current-menu-item {
    background-color: transparent !important;
    border: 0px solid #ffffff!important;
    border-radius: none !important;
}
#top.single-post #header .av-main-nav > li.current-menu-item > a .avia-menu-text, #top.single-post #header .av-main-nav > li.current-menu-item > a .avia-menu-subtext {
    color: #ffffff !important; 
}
#top.single-post .avia-menu li.menu-item-mega-parent {
    background-color: #f2f3ff;
    border: 1px solid #ffffff!important;
    border-radius: 100px !important;
}
#top.single-post #header .av-main-nav > li.menu-item-mega-parent > a .avia-menu-text, #top.single-post #header .av-main-nav > li.current-menu-item > a .avia-menu-subtext {
    color: #109bc5 !important; 
}

This should also work for new post as long as you keep the same menu structure, that is we are targeting the menu-item-mega-parent instead of the current-menu-item

Best regards,
Mike

Hi,
I believe the easiest way to do this is to add a category class to the posts, this way all of the posts with the same category will highlight the “destinations” menu item.
Try adding this code to the end of your functions.php file in Appearance > Editor:

// add category class on single post page
add_filter( 'body_class', 'add_category_class' );
function add_category_class( $classes ) {
    if( is_single() && has_category('destinations') ) $classes[] = 'destinations-cat';
    return $classes;
}

this code will add destinations-cat class to all of the posts that are in the category destinations
Then please change the highlighting css above to:

#top.single-post.destinations-cat .avia-menu li.current-menu-item {
    background-color: transparent !important;
    border: 0px solid #ffffff!important;
    border-radius: none !important;
}
#top.single-post.destinations-cat #header .av-main-nav > li.current-menu-item > a .avia-menu-text, #top.single-post.destinations-cat #header .av-main-nav > li.current-menu-item > a .avia-menu-subtext {
    color: #ffffff !important; 
}
#top.single-post.destinations-cat .avia-menu li.menu-item-mega-parent {
    background-color: #f2f3ff;
    border: 1px solid #ffffff!important;
    border-radius: 100px !important;
}
#top.single-post.destinations-cat #header .av-main-nav > li.menu-item-mega-parent > a .avia-menu-text, #top.single-post #header .av-main-nav > li.current-menu-item > a .avia-menu-subtext {
    color: #109bc5 !important; 
}

Best regards,
Mike

Hi,
functions-enfold.php is the wrong file, please try functions.php, otherwise Please include an admin login in the Private Content area so we can take a look.

Best regards,
Mike

Hi,
That is half of the css solution that I posted, it is to remove the highlighted button for the “current-menu-item” which you didn’t want highlighted. The other half of the css highlights the button you did want highlighted. But both require that the javascript part of the solution works to add the correct class.
If you change the word “destinations” it will do nothing, because it will be broken.
In order to get this to work, I need to see why the function is not working as I wrote it.

Best regards,
Mike

Hi,
Using a child theme is a good idea, as you are building your site you will surely add more customizations and a child theme helps protect your customizations.

Please use our pre-built child theme
You will want to take a couple of steps, 1: please export your theme settings at: Enfold Theme Options > Import/Export > Export Theme Settings File to your computer, this is just for backup.
2: Once you install your child theme, please import your parent theme settings at:
Enfold Theme Options > Import/Export > Import Settings from your Parent Theme
Then you’ll need to re-set your menu options.
Finally, sometimes it is necessary to save your theme options one more time, to encourage the settings to be saved and activated in the merged /wp-content/uploads/dynamic_avia/ folder, a simple way to do this is to go to General Styling > Quick CSS field and place a space in the field so the theme options “Save all changes” button is clickable.

Best regards,
Mike

Hi,
First please export your theme settings file, so you will have a backup.

Then install your child theme and activate it.

Then when you go to the import/export options page you will find a new option to “Import Settings from your Parent Theme”

If you have any problems afterward, you can import the parent theme settings file that you saved earlier, via “Import Theme Settings File”

So, yes it’s the same process, just in this specific order.
It will save your customizations from the General Styling > Quick CSS
But your customizations in your parent functions.php, should be moved manually to your child theme functions.php

Best regards,
Mike

Hi,
I’m sorry, I think I have confused you by suggesting an extra step to make a backup of the theme settings file.
All you need to do is upload the child theme by going to Appearance –> Themes –> Add New –> Upload File
and then activate it.
Then go to your Enfold Theme Options > Import/Export > Import Settings from your Parent Theme.
If you have a backup of your site, I will be happy to do this for you, if you wish.

Best regards,
Mike

Hi,
1: yes
2: it would be ok, but your customizations in the child theme would be gone. But there is no reason to think you will lose your child theme.
3: this is correct.

Best regards,
Mike

Hi,
Please try this css, it removes the bottom margin from the post slider:

#top .avia-content-slider .slide-entry-wrap {
margin-bottom: 0px !important; 
}

If you adjust the 0px to a negative number it will pull the posts even closer together.
This css reduces the margin between the posts by 50%:

#top .avia-content-slider .slide-entry-wrap .slide-entry.av_one_third {
    margin-left: 3% !important; 
}  

Feel free to adjust to suit.

Best regards,
Mike

Hi,
Glad to hear that it is working as intended. What I meant was the margin was 6% but the code above changes it to 3%, thus 50% less :)
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike