How do I Make Caret on Active Menu Item

Good afternoon wordpress geniuses! I hope that you all had a great Easter!

I have a question. I am looking to make the active menu item in a content menu have a caret underneath it. I am going to create this content menu (my menu to navigate the front page) either in DH Mega Main Menu or UberMenu. Both of these plugins allow you to place the menu using a shortcode which will allow me to place it into the front page (so that I can keep the regular menu).

I am clear on the css to make this menu (which I have not yet created) sticky but I do not know how to create a caret on the active menu item.

I guess I am asking which one of the menu tools might make this easier and what the css would be in general to create a caret at the bottom of a menu on the active item. If you can point me in the general direction I can find the css selectors to apply this when I create the menu. I am asking this question before making the menu so that I can hopefully avoid making the menu twice if I don't have it. Thank you.

In summary, I am using either mega main menu or ubermenu to create a menu that I can place at the top of my front page of theie5.org/hideawaylodge/hideaway-home that will stick underneath the menu that displays via wordpress menu system. I am asking which menu will be easiest/better to use to accomplish this and add a caret that will display under the hovered and active menu item. Thank you. I hope I was clear. The whole network has access granted.

Pura Vida,
Mandy

  • Predrag Dubajic

    Hey @Mandy,

    We are great thanks for asking, hope you are feeling awesome this Monday :slight_smile:

    Can you create one menu for testing so I can check how the HTML structure of the menu looks like?
    Maybe something like this would help:
    http://cssarrowplease.com/
    You will just need to check if there is any class added to active menu item which you can use to define the CSS to show only for that class.

    If you are having issues with making this work please create new menu and share the page url, I would gladly help you sort this out :slight_smile:

    Best regards,
    Predrag

  • Mandy

    @Predrag Dubajic, thank you!

    I made a sample menu and it is on the home page: http://theie5.org/hideawaylodge/hideaway-home and the menu I am working on is the orange one that is underneath the video.

    Here is the CSS I have tried though, as you can see, the caret is not following each menu item:

    .ubermenu-current-menu-item{
    position: relative;
    background: #e34819;
    }

    .ubermenu-current-menu-item::after{
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(227, 72, 25, 0);
    border-top-color: #e34819;
    border-width: 30px;
    margin-left: -30px;
    }

    I put this under appearance>ubermenu>general settings>custom css

    Also, I am having trouble making the menu stick to the top underneath the top navigation when it reaches the top? I want both menus to be sticky with the orange one under the main one.

    Lastly, in order to make this menu work as jump links for a menu that navigates the page itself, I have added the anchors for each row within the visual composer and then I made the menu item reflect that link within the page. It is only working part of the time? Would you mind taking a look at appearance>menu>content menu and telling me if I made those links correctly? It seems as though everything should work well? I tried to make the menu item the home page and then the anchor id though this caused the page to reload and I do not want the page to reload since the menu's purpose is to navigate the front page.

    Thank you again!

    Pura Vida,

    Mandy

  • Predrag Dubajic

    Hi Mandy,

    Here is the code I added to your custom CSS and that should do the trick:

    .tabs-nav li.active:after,  li.active:before {
      bottom: 0%;
      left: 74%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    
    .tabs-nav li.active:after {
      border-color: rgba(0, 0, 0, 0);
      border-bottom-color: #FFFFFF;
      border-width: 8px;
      margin-left: -30px;
    }
    
    .tabs-nav li.active:before {
      border-color: rgba(0, 0, 0, 0);
      border-bottom-color: #FFFFFF;
      border-width: 8px;
      margin-left: -35px;
    }

    Your other issues seem to be bit more complicated and we do our best to cover all support request but this goes beyond what we offer here as it would require some time to set up everything with CSS and jQuery.
    My suggestion would be to contact theme and VC developers, they should be able to give you more info about it.

    Also, if you need to customize this then you can post a job in our job board where you can hire a developer to assist further:
    https://premium.wpmudev.org/wpmu-jobs/
    Please note that, no WPMU official staff members are allowed to work in the job board.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.