How to remove top menu item and font awesome icon in WordPress menu?

Question

In my WordPress menu I have a top or header menu item. I know how to find it and use CSS to hide it, but that's not exactly what I want.

At the moment I have menu bars which, when pressed, go to fa-angle-down and header menu item, which, when pressed, go to the actual menu. I'd like to remove this intermittent menu stage consisting of header menu item and fa-angle-down so that the user is taken straight from bars to actual menu. I've looked in my header.php and found fa-bars, but nothing to indicate its attribute, and in navwalker.php, where I found fa-angle-down, but nothing to indicate how it's connected to fa-bars.

I'm assuming that I just have to remove a certain part of navwalker.php, but which part?

Here is my navwalker.php: https://github.com/ColorlibHQ/shapely/blob/master/inc/class-wp-bootstrap-navwalker.php

Here is my header.php: https://github.com/ColorlibHQ/shapely/blob/master/header.php

Page is here

Here is php which i think controls it.

$item_output = $args->before;

        /*
         * Glyphicons
         * ===========
         * Since the the menu item is NOT a Divider or Header we check the see
         * if there is a value in the attr_title property. If the attr_title
         * property is NOT null we apply it as the class name for the glyphicon.
         */
        if ( ! empty( $item->attr_title ) ) {
            $item_output .= '<a' . $attributes . '><span class="glyphicon ' . esc_attr( $item->attr_title ) . '"></span>&nbsp;';
        } else {
            $item_output .= '<a' . $attributes . '>';
        }

        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= ( $args->has_children ) ? ' </a><span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown"><i class="fa fa-angle-down" aria-hidden="true"></i></span>' : '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }// End if().
}

Here is html:

                        <i class="fa fa-bars"></i>
                    </div>

                    <div class="module-group right">    
                        <div class="module left">


                            <div class="collapse navbar-collapse navbar-ex1-collapse"><ul id="menu" class="menu"><li id="menu-item-3530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3530 dropdown"><a title="Contact" href="https://4309.co.uk/contact/">Contact </a><span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown"><i class="fa fa-angle-down" aria-hidden="true"></i></span>

Answer 1

This is a very poorly coded menu. In order to really fix it you would need to also edit the JS being used.

As a pretty simple work-around, find the following rule in your style.css...

.mobile-menu ul.dropdown-menu.active {
    display: block !important;
}

Note: there are a couple instances of .mobile-menu ul.dropdown-menu.active, make sure to edit the one that is not in a media query.

Change the above rule to...

.mobile-menu ul.dropdown-menu.active,
.mobile-menu ul.dropdown-menu {
    display: block !important;
}

Now when you click the first menu, the second menu should be open by default.

Since you no longer need the second menu you can just hide it. Add this into your stylesheet...

.mobile-menu .shapely-dropdown {
    display: none !important;
}