Docs

[SixIT]

Hi there,

I have a custom top bar navigation on my test site that I like for desktop, but looks messy on mobile view ports. Is there a way of making the top bar menu just go into the mobile nav dropdown when it switches to either mobile or tablet view ports?

Here’s the link to the site http://4a0.faf.myftpupload.com/

Thanks in advance!

[Rad]

Hi there,

Thanks for posting in.

Sure, please add this code to Admin > Appearance > Customizer > Custom > Global Javascript.

jQuery ( function($) {

if( $(window).width() < 980 ) {

$('.x-topbar').prependTo('.x-nav-wrap.mobile');

}

} );

Thanks!

[SixIT]

Hi there,

Thanks for that, that worked great. However it seems to have unlinked the topbar links on mobile view ports.

Would you also be able to remove the lines above and below the topbar, or just have a small line in between them?

Also (and this isn’t crucial, so no worries if you can’t) I quite liked having just the social icons at the top of the nav bar (on mobile).

Thanks for all the help, I really appreciate it!

[Rue Nel]

Hello There,

The links were behind the social icons container and that is why you can’t click on the links. To resolve this, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px){
  .x-topbar {
    border: none;
  }
  
  .top-menu {
    float: none;
  }
}

Please let us know if this works out for you.

[SixIT]

Perfect you guys are great!

Many Thanks!

[John Ezra]

You’re most welcome! 🙂

[Author]

Posts