This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: 

Moble Menu not showing themeblvd_header_menu_addon item

  • Creator
    Topic
  • #23674
    Mark Wiard
    Participant

    I am using a shopping cart from a knitting niche site called Ravelry. They handle all the cart features, and you access the cart with a little javascript link:

    javascript:void(0);” onclick=”R.cart.show(71); return false;

    I am unable to put this code in the regular WordPress menu system. I just doesn’t work.

    So, I have hooked this code, and some formatting into themeblvd_header_menu_addon. This works great, and you can see it here:

    http://verypink.com/AjBfTTxP95/

    the View Cart icon and link.

    /* ----------- START cart icon in menu */
    function cart_in_menu () {
    echo '<div class="cart-menu">
    <i class="fa fa-shopping-cart"></i> View Cart
    </div>';
    }
    add_action( 'themeblvd_header_menu_addon', 'cart_in_menu' );
    /* END cart icon in menu */

    When I test on phones, this link does not show in the mobile menu. How can I work around this? Is there another hook in the mobile menu that I can use to insert the View Cart link?

    Or maybe you have another idea on how to show the View Cart on a mobile device menu?

    thank you in advance,
    mark

Viewing 1 replies (of 1 total)
  • Author
    Replies
  • #23681
    Jason Bobich
    Keymaster

    Hello Mark,

    All of your HTML is there. You’ve just got different things being displayed or hidden, based on the viewport size, with CSS. This is all stuff you can edit from your child theme’s style.css.

    Do you understand how to utilize your inspector to see the CSS effecting your site, from the mobile perspective? It’s easy. Just scale your browser down to the size of a mobile device, and then peak under the hood with your inspector. This is a crucial skill if you’re going to be doing custom work like this.

    You can see where you’re hooking your button within <nav class="header-nav></nav> which is hidden with CSS on tablets and below.

    So, you can override this with CSS, if you want. Maybe display the menu, and then hide the actual <ul class="tb-primary-menu"></ul> within at tablets and below, instead.

    Or, you could hook to another action in the header. Here’s a map of your other options:

    http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.