Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 13, 2016 at 6:25 pm #632185
    zimbo

    Website here.

    The main menu has two elements that have 2 levels of sub-levels.
    e.g. > Community > Clubs > Rotary Clubs
    When I hover over Community, the four sub-levels display. That’s OK.
    But there is no indication that 2 of these sub-levels have themselves got further sub-levels. Not until I hover over Clubs does its sub-levels display.

    What I want is for Clubs to always show an arrow to give a hint that there is another sub-level. I do not want to use a Mega Menu.

    This image shows the current situation on the left. The right hand side shows the effect I want – the 2 right arrows are permanently shown i.e. if I hover over Community, the arrow to the right of Clubs & Societies is visible indicating additional content.

    So, I have added a CSS Class of ‘sub-level-3’ to the menu element ‘Clubs & Societies’. The CSS declaration is
    .sub-level-3 {background: url(https://dev.henleyherald.com/wp-content/themes/enfold-child/images/sub-level-arrow.png) no-repeat right; z-index:999; }
    The class is attached to the menu li element, the arrow image is available, I’ve tried overriding the z-index, but, as you can see on the live site, it’s not working.

    Please can you suggest a solution to fix it, or offer another way of doing this?

    May 16, 2016 at 4:10 pm #633080
    Yigit

    Hey zimbo,

    Please refer to my post here – https://kriesi.at/support/topic/manu-bar/#post-622656

    Best regards,
    Yigit

    May 16, 2016 at 5:15 pm #633148
    zimbo

    @Yigit – I got an email from you answering this but it has not updated here in my original post:
    “Yigit wrote:
    Hey zimbo,
    Please refer to my post here – https://kriesi.at/support/topic/manu-bar/#post-622656
    Best regards,
    Yigit
    Post Link: https://kriesi.at/support/topic/how-to-display-an-arrow-in-a-sub-menu-to-indicate-a-further-sub-level-exists/#post-633080”

    That solution works for the sub-levels but it also puts the ‘ >’ on the top level main menu elements – is there a way to NOT have the right arrow on the main menu but only on the sub-menu/levels?

    • This reply was modified 8 years, 7 months ago by zimbo.
    May 17, 2016 at 12:46 pm #633701
    Yigit

    Hi,

    It seems like you figured it out already?

    Best regards,
    Yigit

    May 17, 2016 at 1:17 pm #633723
    zimbo

    Hi Yigit,

    Yes I did, I was just about to post that!

    I changed .menu to .sub-menu and it worked. I assume that’s the correct way?

    One further question – I wanted to space out the right arrow from the sub-menu title and so am using this:
    content: '\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0>'

    However, depending on the sub-menu title length, the arrows are not vertically aligned with this method. as you have seen.

    Is there a way to have the right arrows lined up vertically under each other on the right side of the sub-menu li container e.g. remove the spaces and use float: right or similar?

    May 17, 2016 at 1:28 pm #633730
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    .sub-menu li > a:after {
    position: absolute;
    right: 15px;
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Best regards,
    Yigit

    May 17, 2016 at 4:29 pm #633823
    zimbo

    Excellent Yigit, many thanks.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘How to display an arrow in a sub-menu to indicate a further sub-level exists?’ is closed to new replies.