Extend the right navigation with a link to the checkout page

Hi Kharis,

as you can see in the screenshot, I added a link with “Zur Kasse” to the main menu which leads to the checkout page:

We would like to switch that link to the right nav. So, that the right nav includes the “Login/Register” + “Shopping bag” and “Zur Kasse” links.

Is that possible? What kind of code do we have to add?

Thank you so much,

Alexander

Hi Alexander,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 993px) {
      .main-navigation {
        float: right;
      }

      .main-navigation ul.menu > li {
        padding-left: 5px;
        padding-right: 5px;
      }
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

unfortunately that doesn’t work. It just tightens the right menu and nothing happens in the left menu:

I know how to delete the “Zur Kasse” from the main menu on the left side. But I do not know how to add that to the menu on the right. Ideally, there would be the icon for “Register/Login” then the icon for “shopping cart” and beside that the “Zur Kasse”.

Thanks you so much again,
Alexander

Hi Alexander,

Try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

      if( $('.nav-link-right .nav-link-cart').length ) {

        var checkoutURL  = 'https://woolrockers.com/kasse/';
        var checkoutText = 'Zur Kasse';

        $('<li class="nav-link-checkout"><a class="header-checkout-link" href="'+checkoutURL+'">'+checkoutText+'</a></li>').insertAfter( '.nav-link-right .nav-link-cart' );

      }

    })(jQuery);
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
  .nav-link-right .nav-link-cart {
    margin-right: 5px;
  }

  .nav-link-right .nav-link-checkout {
    margin-right: 20px;
    padding-top: 5px;
  }
  1. Remove your checkout link from your active header menu (Appearance > Menus)

Regards,
Kharis
aThemes Support

Hi Kharis,

thank you so much. It works and looks good on desktop.

But on mobile devices it looks a little bit strange because the shopping cart and “Zur Kasse” are very close to each other:

Would you be so kind and tell me how to put a little bit more space between for mobile?

Best,
Alexander

Try adding this CSS code:

    @media only screen and (max-width: 992px) {
      .nav-link-right .nav-link-checkout {
        padding-left: 15px;
      }  
    }

Regards,
Kharis
aThemes Support

Very nice. Thanks, Kharis. Have a nice weekend!

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support