Docs

[crawfordandjohn]

Hi guys :),

So we have replaced the menu with ‘Superfly Menu’ and are wanting the X menu in place to show just the search icon next to the menu. We’ve got this in place by using this:

  #menu-search-menu-placeholder > li > a {
    position: fixed;
    left: 90%;
    top: 4%;
}

and the search icon is sitting perfectly next to the burger menu icon, however, we need to effectively remove the mobile breakpoint so this search icon stays there even on mobile – perhaps we could take the breakpoint down to something like 100px?

Are you able to show me the code to change the break point please :)?

Thanks!

Steven

[crawfordandjohn]

This reply has been marked as private.

[Rue Nel]

Hello Steven,

Thanks for writing in! To resolve your issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
  .x-nav-wrap.desktop {
    display: block !important;
    margin-right: 20px;
    text-align: center;
  }

  .masthead-inline .desktop .x-nav,
  .x-navbar .desktop .x-nav>li {
      display: inline-block;
      float: none;
  }
  
  .x-nav-wrap.mobile,
  .x-nav-wrap.desktop .x-hidden-desktop {
      display: none !important;
  }
}

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

[crawfordandjohn]

Amazing, thank you! It’s slightly out of line with where I want it, but nothing we can’t change with a bit of css tweaking :).

Thanks for your help!

Steven

[Rue Nel]

Hey Steven,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Author]

Posts