Show Quick Create in the mobile navbar

**a.slyzhko** · 07-30-2026, 02:33 PM

The Quick Create button is currently hidden on mobile by the hidden-xs class.

I successfully enabled it without any JavaScript changes by applying the following customization.

Create custom/Espo/Custom/Resources/metadata/app/clientNavbar.json with

Code:

	{
	 "items": {
	     "quickCreate": {
	         "class": "dropdown quick-create-container"
	     }
	 }
	}

Register a custom CSS file in: custom/Espo/Custom/Resources/metadata/app/client.json

Code:

	{
	 "cssList": [
	     "__APPEND__",
	     "client/custom/css/quick-create-mobile-fix.css"
	 ]
	}

css file content:

Code:

	@media screen and (max-width: 767px) {
	
	  #navbar .navbar .navbar-right-container > .navbar-right > li.quick-create-container {
	      position: absolute;
	      top: 0;
	      right: calc(var(--4px) * 10 + var(--4px));
	
	      width: calc(var(--4px) * 10 + var(--4px));
	      min-width: calc(var(--4px) * 10 + var(--4px));
	      height: var(--navbar-height);
	
	      float: none;
	      box-sizing: border-box;
	  }
	
	  #navbar .navbar .navbar-right-container > .navbar-right > li.quick-create-container > a {
	      display: flex;
	      align-items: center;
	      justify-content: center;
	
	      width: 100%;
	      height: 100%;
	      padding: 0;
	
	      box-sizing: border-box;
	  }
	
	  #navbar .navbar .navbar-right-container > .navbar-right > li.quick-create-container.open > ul.dropdown-menu {
	      position: absolute;
	      top: 100%;
	      right: 0;
	      left: auto;
	
	      margin-top: 0;
	      background-color: var(--dropdown-bg);
	      box-shadow: var(--dropdown-box-shadow);
	  }
	
	  #navbar .navbar .navbar-right-container > .navbar-right > li.quick-create-container.open > ul.dropdown-menu > li > a {
	      padding: var(--4px) var(--20px);
	      color: var(--dropdown-link-color);
	  }
	
	  #navbar .navbar .navbar-right-container > .navbar-right > li.quick-create-container.open > ul.dropdown-menu > li > a:hover,
	  #navbar .navbar .navbar-right-container > .navbar-right > li.quick-create-container.open > ul.dropdown-menu > li > a:focus {
	      color: var(--dropdown-link-hover-color);
	      background-color: var(--dropdown-link-hover-bg);
	  }
	
	  #navbar .navbar .navbar-right-container > .navbar-right > li.quick-create-container.open > ul.dropdown-menu > .dropdown-header {
	      padding: var(--3px) var(--20px);
	      color: var(--gray-light);
	  }
	}

This makes the Quick Create button and dropdown work correctly on mobile and keeps the button aligned with the notification button.

Since this can be implemented through metadata and CSS only, it may be reasonable to enable Quick Create on mobile by default. Please consider including this behavior in the core package.