show menu arrows indicating child-menu

Home Forums Accelerate Free show menu arrows indicating child-menu

This topic contains 18 replies, has 3 voices, and was last updated by  Nitu Shrestha 1 week, 3 days ago.

Viewing 4 posts - 16 through 19 (of 19 total)
  • Author
    Posts
  • #1389119

    m.p
    Participant

    Hey Nilan,

    we are getting there. Thank you!
    If you have a look now and check the next level of submenu, the arrows are now smaller than the level-0 arrows. (e.g. the arrow in the menu when you open Schule and Team)

    best regards

    #1389236

    Nitu Shrestha
    Moderator

    @m.p

    Can you add the below CSS code to Additional CSS box and check?

    @media screen and (max-width: 767px){
      .menu-item-has-children .sub-menu .sub-toggle {
        color: #fff;
        width: 20px;
        text-align: center;
      }
    }

    Thanks.

    #1389275

    m.p
    Participant

    Dear Nitu,

    this code works perfect. For anyone who wants the complete solution, here you go:

    Thanks again for your support!

    .main-navigation li.current-menu-item, .main-navigation li.current-menu-ancestor, .main-navigation li:hover {
    	background: #3942a8;
    	color: #fff;
    }
    
    .main-navigation li:hover > .sub-toggle  {
    	color: #fff;
    }
    
    .sub-toggle {
    	padding: 12px 10px 12px 0;
    	display: inline-block;
    }
    
    .menu-item-has-children .sub-menu .sub-toggle {
    	color: #444444;
    	position: absolute;
    	right: 9px;
    	top: 50%;
    	padding: 0;
    	transform: translateY(-50%);
    }
    
    .menu-item-has-children > .sub-toggle {
    	display: none;
    }
    .menu-item-has-children > .sub-menu .sub-toggle {
    	display: inline-block;
    }
    
    @media (max-width: 768px) {
        .better-responsive-menu .sub-toggle {
            background: transparent;
            color: initial;
        }
    }
    
    @media screen and (max-width: 767px) {
        .menu-item-has-children > .sub-toggle {
            display: block;
        }
    
        .menu-item-has-children .sub-menu .sub-toggle {
            top: 0;
            transform: translatey(50%);
        }
    }
    
    @media screen and (max-width: 767px){
      .menu-item-has-children .sub-menu .sub-toggle {
        color: #fff;
        width: 20px;
        text-align: center;
      }
    }
    #1389387

    Nitu Shrestha
    Moderator

    @@m.p

    Do let us know if you have got any further query regarding to our theme. we will try to help you on those as far as possible. We will really appreciate if you could help us too by rating our theme in WordPress repo here:-
    https://wordpress.org/support/view/theme-reviews/accelerate

    Thanks.

Viewing 4 posts - 16 through 19 (of 19 total)

You must be logged in to reply to this topic.