Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #233952

    Hi there,

    I need some CSS help and all I tried doesn’t work so far :(
    (Please find the admin access below)

    1) Sidebar nested Navigation
    I’d like to style the nested submenu in the sidebar like in your demo: http://www.kriesi.at/themes/enfold/pages/contact/

    I wanted to have the parent item to be font-size:20px, the other items font-size 16px. This css code didn’t work:

    .nested_nav li {
    /*text-align: left !important;*/
    background: #f8f8f8;
    font-size: 20px;
    }

    2) Entypo icons in navigation instead of bullets
    I’d like to replace the bullet in the navigation’s submenu using my optional CSS class called “kartenicon”, so that users don’t have to copy the icon’s span-code, but simply add the CSS class in WordPress’ menu options to replace the bullet.

    I used this, but it doesn’t show it in the same line:

    .kartenicon .avia-bullet:before {
    display: none;
    } 
    
    .kartenicon:before {
        content: "\E842";
        font-family: 'entypo-fontello';
        padding-right: 10px;
    }

    Could you please have a look?

    Thanks in advance!

    Daniel

    #233953
    This reply has been marked as private.
    #234279

    Hi!

    Thank you for using the theme. I hope you’re doing great.

    1.) Please add this on Quick CSS or custom.css to modify the nested menu:

    .main_color .widget_nav_menu ul:first-child>.current_page_item
    background: #fcfcfc;
    }
    
    .widget_nav_menu ul:first-child>.current_page_item, .widget_nav_menu ul:first-child>.current-menu-ancestor {
    padding-left: 51px;
    left: -51px;
    top: 1px;
    margin-top: -1px;
    padding-top: 1px;
    width: 100%;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
    }

    2.) The icon is showing on my end. Please add this:

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

    Best regards,
    Ismael

    #234369

    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 9 months, 2 weeks ago by  danaldo.
    #234382

    1) I managed to style the nested submenu like the following, but it has a vertical line on the right after the name of the menu item plus it’s not completely working in Firefox – looks better in Chrome and Safari though. I have also given the nested h3 an individual class:
    <div class='widget widget_nav_menu'><h3 class='my-parent-item'><a href=";

    How do I change it, so that the lin eon the right after the menu item disappears and that it is also good in Firefox? Are the absolute styles for the padding values ok or should I use sth else instead? No idea, if I have styled the right tags …

    Here is the CSS:

    /* NESTED SUBMENU */
    .nested_nav .current_page_item {
    padding-left: 51px;
    padding-right: 52px;
    left: -51px;
    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;
    }
    
    .my-parent-item {
    padding-left: 164px;
    padding-right: 152px;
    font-size: 24px;
    font-weight: normal;
    font-color: blue;
    top: 1px;
    margin-top: -1px;
    padding-top: 1px;
    width: 100%;
    box-shadow: 0px 1px 1px 0px #DADADA;
    }

    2) Still no solution here for the cascading map icons in the mega menu navigation.

    Looking forward to your reply!

    #234441
    This reply has been marked as private.
    #235304

    Hi!

    To remove the line breaks for the headline and to align the menu item to the right use this code:

    
    .sidebar_left .my-parent-item {
    padding-left: 0;
    padding-right: 0;
    font-size: 20px;
    }
    
    .sidebar_left  .widget_nav_menu .current_page_item{
    padding-left: auto;
    padding-right: 0;
    }
    

    Regards,
    Peter

    #235827

    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;
    }
    #236362

    Hey!

    Please add following code to Quick CSS as well

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

    Regards,
    Yigit

    #236383

    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:
    Mega Menu with map icon via CSS class

    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;
    }
    
    
    #237094

    Hi!

    Please add following code to Quick CSS as well

    .kartenicon:before { clear: both; }

    Best regards,
    Yigit

    #238031

    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; }
    #238032

    2) Entypo icons in navigation instead of bullets

    Go to Design > Menu and open your menu item. Add the class .mapicon into the field CSS-Class (optional) (if this is not shown, look at the top of the Menu page with options and check “CSS Class”

    Then use this CSS:

    /* MAP ICONS instead of bullets in main navigation */
    .mapicon .avia-bullet:before {
    display: none;
    } 
    
    .header_color .mapicon .avia-bullet {
    display: none;
    }
    
    .mapicon {
    content: "\E842";
    font-family: 'entypo-fontello';
    font-size:16px;
    line-height: 30px;
    padding-right: 10px;
    float: left;
    clear: both; 
    }

    Thanks for your help, support team – can be closed now :)

    #238806

    Hi!

    Glad we could help :) Let us know if you have any other questions or issues

    Cheers!
    Yigit

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘CSS for nested submenu and for icons as bullets in the menu’ is closed to new replies.