CSS for nested submenu and for icons as bullets in the menu

Hi Ismael,

thanks for your answer – I hope you are doing great, too!

1) I inserted the CSS in the Quick CSS, but unfortunately the CSS does not work for the nested submenu. Nothing has changed so far (and I cleared cache etc.) :(

2) The CSS for the map icons works, but the menu still has old bullets plus is cascading: http://imgur.com/GkLk7rH

Could you please have another look at both issues?

Thanks again!

Daniel

• This reply was modified 10 years, 9 months ago by danaldo.

Thanks a lot for your reply, Peter. CSS really is a challenge for me – happy, that you are still with me :)

I used your snippet and it almost worked for the nested menu.
Could someone please have a look at the line under the h3 parent item and the hover of the list item:

Here is the code I used so far in the Quick CSS:

/* NESTED SUBMENU */
.sidebar_left .my-parent-item {
padding-left: auto;
padding-right: 3px;
font-weight: normal;
font-color: blue;
top: 1px;
margin-top: -1px;
padding-top: 1px;
width: 100%;
box-shadow: 0px 1px 0px 0px #DADADA;
}

.sidebar_left .nested_nav .current_page_item {
padding-left: auto;
padding-right: 52px;
top: 1px;
margin-top: -1px;
padding-top: 1px;
width: 100%;
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
background: #f8f8f8;
font-size: 16px;
}

.main_color a:hover, .main_color li a:hover {
background: #f8f8f8;
padding-left: auto;
}

Thanks, Yigit, that worked perfectly! Why do you only need two lines of CSS code and I’m trying to work with at least seven? :)

The last thing missing was the mega menu thing: the menu items in the mega menu with a entypo icon (through the CSS class kartenicon) are still cascading and the Parent item is having a line break:

Could you please have a look at that? Then I would make a summary of the changes with the soultions for the issues.

CSS for the mega menu item used so far:

/* MAP ICONS instead of bullets in main navigation */
.kartenicon .avia-bullet:before {
display: none;
} 

.header_color .kartenicon .avia-bullet {
display: none;
}

.kartenicon:before {
content: "\E842";
font-family: 'entypo-fontello';
padding-right: 10px;
float: left;
}

.parent-mm-item .avia-bullet:before {
display: none;
} 

.parent-mm-item :before {
content: "\E843";
float: left;
font-family: 'entypo-fontello';
padding-right: 10px;
}

Thanks alot for your help. Here are the solutions so far as a summary:

1) Sidebar nested Navigation

In the functions.php:

/*
* MYSUBNAVI - Display a subnavigation for pages that is automatically generated, so the users doesnt need to work with widgets
*/
if(!function_exists('avia_sidebar_menu'))
{
    function avia_sidebar_menu($echo = true)
    {
        $sidebar_menu = "";

        $subNav = avia_get_option('page_nesting_nav');
  
        
        $the_id = @get_the_ID();
        $args 	= array();
		global $post;

        if($subNav && $subNav != 'disabled' && !empty($the_id) && is_page())
        {
            $subNav = false;
            $parent = $post->ID;
            $sidebar_menu = "";

            if (!empty($post->post_parent))
            {
                if(isset($post->ancestors)) $ancestors  = $post->ancestors;
                if(!isset($ancestors)) $ancestors  = get_post_ancestors($post->ID);
                $root		= count($ancestors)-1;
                $parent 	= $ancestors[$root];
            }

            $args = array('title_li'=>'', 'child_of'=>$parent, 'echo'=>0, 'sort_column'=>'menu_order, post_title');

            //enables user to change query args
            $args = apply_filters('avia_sidebar_menu_args', $args, $post);

            //hide or show child pages in menu - if the class is set to 'widget_nav_hide_child' the child pages will be hidden
            $display_child_pages = apply_filters('avia_sidebar_menu_display_child', 'widget_nav_hide_child', $args, $post);

            $children = wp_list_pages($args);

            if ($children)
            {
$default_sidebar = false;
$parentpage = get_the_title($post->post_parent);
$parentpagelink = get_permalink($post->post_parent);
$sidebar_menu .= "<div class='widget widget_nav_menu'><h3 class='my-parent-item'><a href=";
$sidebar_menu .= $parentpagelink;
$sidebar_menu .= ">";
$sidebar_menu .= $parentpage;
$sidebar_menu .= "</a></h3><ul class='nested_nav'>";
$sidebar_menu .= $children;
$sidebar_menu .= "</ul></div>";
            }
        }

        $sidebar_menu = apply_filters('avf_sidebar_menu_filter', $sidebar_menu, $args, $post);

        if($echo == true) { echo $sidebar_menu; } else { return $sidebar_menu; }
    }
}

Here is the CSS I used:

/* NESTED SUBMENU */
.sidebar_left .my-parent-item {
padding-left: auto;
padding-right: 3px;
font-weight: normal;
font-color: blue;
top: 1px;
margin-top: -1px;
padding-top: 1px;
width: 100%;
box-shadow: 0px 1px 0px 0px #DADADA;
}

.sidebar_left .nested_nav .current_page_item {
padding-left: auto;
padding-right: 52px;
top: 1px;
margin-top: -1px;
padding-top: 1px;
width: 100%;
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
background: #f8f8f8;
font-size: 16px;
}

.main_color a:hover, .main_color li a:hover {
background: #f8f8f8;
padding-left: auto;
}

.widget_nav_menu a { padding-right: 52px; width: 100%; }
.sidebar_left .inner_sidebar { margin-right: 0; }