Custom CSS menu class added to body class?

  • Hi – hope you can help!

    I need to find a way to auto-magically add the custom CSS classes added to wp_nav_menu parent nav items (via edit menu) to the body classes.

    Short version:
    I have created a two tier horizontal nav structure (similar to https://www.metro.co.uk), although I want to give each section a different colour.
    I have added custom CSS classes (via edit menu in admin backend) to each parent item in the nav. I need to find a way to also auto-magically add the same custom CSS classes added to parent nav items also to the body classes when a user is on that specific page or child of i (I.e. <_body class="my_custom_class_added_in_menu_edit the_rest_of_usual_body_classes"> )

    Any help / pointers hugely appreciated!

    .
    .
    Longer version:
    This is probably one of those things that’s a lot easier than I’m trying to make it.

    The nav Im creating for my site is a horizontal strip, with the subnav displayed in a horizontal strip on a second row below the main primary nav –? a bit like the nav on https://www.metro.co.uk

    I have this working fine using wp_nav_menu and some CSS, where the subnav strip is created by making pages/catergories etc sub-items of children of the parent item when editing the menu structure in the admin back end. Simples. Although it took me a while to get my CSS that far (was originally using separate custom menus for each subnav strip).

    Next, I want to colour each nav section or category differently. So for example the horizontal sub nav strip for ‘News’ and it’s sub categories might be one colour, ‘Features’ and its sub items a different colour etc.

    I first started doing this by using the various body classes (i.e. <body class="category-news"> to help style my css. That works to an extent but not all the way (it was breaking as soon as a child category or single or page was selected, so I cribbed a function and figured out how to always add the parent category (i.e top level / parent nav class) to the body classes). This gets me closer, but still not all the way. e.g. in may nav if I have a page or single that is a child of a category nav the colouring and highlighting via CSS still fails although it now works fine for child categories.

    So now I’m trying to use the optional CSS classes that can be used when editing and creating menus. I’m adding custom classes to each of the parent (top-level) nav items
    <li>, but the element I actually need to style is the parent <div> and
    <ul> of the
    <li> that the custom class gets added to. To solve this I’m now trying to also add this custom class to the body classes, so I can use CSS to style anything below the body tag based upon the nav item that’s selected.

    My PHP is ‘enthusiastic-novice-standard’, and I can usually figure out whats going on, but I haven’t managed to create a filter or function that does what I need yet. I could do it with JS or jQuery, but don’t like doing things like this that way and there’s a small delay with jQuery that’s noticeable on page load.

    It feels like I’ve typed loads… hope it all makes a little sense.
    Any help would be hugely appreciated!

    Many thanks
    Stef

Viewing 1 replies (of 1 total)
  • Thread Starter tictok

    (@tictok)

    Not mine, but found this elsewhere, although think it may need tidying a little to check nav menu exists and that there are items in the array first. Going to test now.

    add_filter('body_class','menu_class_to_body');
function menu_class_to_body($classes)
{
        $items = wp_get_nav_menu_items( 1 ); //change to suit your menu id

          foreach ($items as $item):
                $menuClasses = $item->classes;
                $objectId = $item->object_id.' ';

                if ( is_page($item->object_id) ):
                    $current[] = $menuClasses;
                endif;

          endforeach;

        $classes[] =  $current[0][0];

        return $classes;
}

    Seems to be working for me so far…

Viewing 1 replies (of 1 total)
  • The topic ‘Custom CSS menu class added to body class?’ is closed to new replies.