Docs

[SixIT]

Hi Guys,

I’m wondering if you can help me with two things I’m stuck on.

1. I’ve got a “Buy Tickets” button in my nav bar which looks great (here is my site http://0f4.901.myftpupload.com/). However when the viewport resizes for mobile this button obviously gets moved to the bottom of the navigation dropdown. Would it be possible to have this button next to the mobile navbar button when viewports are resized for tablets and mobile (please see first attached screenshot).

2. I have a custom topbar and topbar menu, and when viewports are resized for mobiles and tablets the topbar menu gets moved into the mobile dropdown menu (which is what I want). However there are lines above and below each menu item, so it can be hard to see where one menu item starts and the other ends. I’m wondering if there’s a way of removing the top and bottom lines and increasing the margin in between each topbar menu item (please see second attached screenshot).

Thanks in advance for any help you can provide!

[Rue Nel]

Hello There,

Thanks for writing in! To resolve your issue, please follow these steps:
1] Please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('document').ready(function(){
    var button = $('.x-nav-wrap.mobile .menu-item-12057 span button');
    $('.x-nav-wrap.mobile .menu-item-12057').css('display', 'none');
    button.addClass('buy-tickets').insertAfter( $('.x-btn-navbar') );
  });
})(jQuery);

2] And then please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .buy-tickets {
    float: right;
    margin-top: 35px !important;
}

@media(min-width: 980px){
    .x-navbar .buy-tickets {
        display: none;
    }
}

We would loved to know if this has work for you.
If you need anything else we can help you with, please let us know.

[SixIT]

That’s worked perfectly visually, however it seems to have lost it’s functionality on mobile devices. I click it and nothing happens (doesn’t link anywhere). Is there a way to resolve this? Many thanks in advance!

[Rue Nel]

Hello Again,

Thanks for updating in! To preserve the link, have the JS code updated and make use of this code instead:

(function($){
  $('document').ready(function(){
    var button = $('.x-nav-wrap.mobile .menu-item-12057 span button').wrap(' <a class="my-buy-tickets-link" href="http://0f4.901.myftpupload.com/plan-your-visit/booking/"></a>');
    $('.x-nav-wrap.mobile .menu-item-12057').css('display', 'none');
    button.addClass('buy-tickets').insertAfter( $('.x-btn-navbar') );
  });
})(jQuery);

We would loved to know if this has work for you. Thank you.

[SixIT]

Hi Rue, thanks for the reply. It’s still not linking for some reason. Is there another way to resolve it? Many thanks!

[Rue Nel]

Hello There,

Please update it again and use this:

(function($){
  $('document').ready(function(){
    var button = $('.x-nav-wrap.mobile .menu-item-12057 span button')
    $('.x-nav-wrap.mobile .menu-item-12057').css('display', 'none');
    button.addClass('buy-tickets').insertAfter( $('.x-btn-navbar') );
    $('.buy-tickets').wrap('<a class="my-buy-tickets-link" href="http://0f4.901.myftpupload.com/plan-your-visit/booking/"></a>');
  });
})(jQuery);

Hope this helps.

[SixIT]

Thank you so much, that’s worked perfectly! 🙂

[Rue Nel]

Hello There,

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

[SixIT]

Thanks again! 🙂

[Rue Nel]

No Problem.
If you need anything else we can help you with, please let us know.

[Author]

Posts