Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Change dropdown arrows to chevron

Home Forums Support Change dropdown arrows to chevron

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #147826
    Kaleb

    Hello,

    Please let me know how I can change the dropdown arrows to chevron. I’m using a child theme and would prefer to do it from there.

    I tried change the navigate.js but didn’t have any luck. Thanks for your time!

    #147854
    bdbrown

    Hi Kaleb. You can remove the existing arrows by using this CSS:

    .sf-menu li a:after {
        border: none !important;
    }
    

    Then you can add icons to your menu items using the built in Font Awesome library or by using this plugin: https://wordpress.org/plugins/menu-icons/

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

    #147966
    Kaleb

    Thank you for the information. I have the child theme style.css working fine.

    I should have specified in the first message that this is for the flyout menu. Applying the CSS you provided didn’t work for this. Maybe it works for the regular menu.

    Again thanks for your time with this.

    #148010
    bdbrown

    Instead of what I posted above, give this CSS a try:

    /* change slideout menu icons to chevrons */
    #generate-slideout-menu li .fa-caret-down:before {
        content: "\f078";
    }
    #generate-slideout-menu li .fa-caret-up:before {
        content: "\f077";
    }
    
    #344981
    Steve

    This code:

    .sf-menu li a:after {
        border: none !important;
    }

    dosnt seem to work anymore.
    Could you please tell me how to replace the arrow nowadays?

    Thank you very much and have a nice day.

    #345070
    Leo
    Staff
    Customer Support

    Give this a shot:

    .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
    
    .main-navigation .main-nav ul li.menu-item-has-children > a:after {
        border: 0 none !important;
        content: "\f013" !important;
        font-family: FontAwesome;
        line-height: normal;
        margin-right: 10px !important;
        margin-top: -7px !important;
    }

    It would replace a FontAwesome icon in place of the arrow.

    You may have to adjust the margins depending on the shape/size of the icon.

    #345448
    Steve

    Thank you very much,

    the code would work if I there was not already something in the after element:

    /* nav link animation*/
    .main-navigation .menu > .menu-item > a::after
    {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        width: 0;
        height: 2px;
        background-color: #fff;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item > a:hover::after{
        width: 70%;
    }

    do i have to decide what i want (animation or different dropdown logo) ?

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.