Swap menu and search button in mobile view

  • Since google demands appmakers that the menu button is left upper corner this has become a standard. People are now getting used to automatically tap up left to revert or browse.

    So I would like to swap search and menu.
    Furthermore I would like to alter the menu button by design. A mixture of my logo and the menu three bars would be nice. How/where to alter this all?

Viewing 1 replies (of 1 total)

  • Hi vinz98. For your first request try this in a child theme style.css or a plugin like Simple Custom CSS:

    /* swap mobile topbar menu and search */
#nav-topbar .nav-toggle {
 float: left;
}
@media only screen and (max-width: 719px) {
#nav-topbar .toggle-search, #nav-topbar .search-expand {
  right: 0;
  left: auto;
  }
}

    For your other request you could create an image of your choice, then replace the existing FontAwesome icon with your image using this:

    #nav-topbar .nav-toggle fa-bars:before {
  content:  url(/path/to/image.jpg);
}

    Note that the image is inserted at it’s exact dimensions and cannot be resized. More info at CSS-Tricks.

Viewing 1 replies (of 1 total)
  • The topic ‘Swap menu and search button in mobile view’ is closed to new replies.