Two Ways to Hide the H5 Page Header (page-head) in uni-app

To remove the top navigation bar in H5 while keeping it for mini-programs, follow these steps:

  1. Use uni-app /* #ifdef H5 */ to detect the H5 environment
  2. Target the generated top navigation bar element (page-head)
  3. Apply display: none in App.vue so it only affects H5

Show Header in Mini-Program, Hide in H5

In pages.json:

1{ 
2  ...... 
3  "globalStyle": { 
4    ...... 
5    "navigationStyle": "default" 
6    ...... 
7  } 
8  ...... 
9}

In App.vue, set global style for H5:

1/* #ifdef H5 */
2uni-page-head { display: none; }
3/* #endif */

Hide Only in H5 Example


Hide Header on All Platforms

In pages.json:

1{ 
2  …… 
3  "globalStyle": { 
4    …… 
5    "navigationStyle": "custom" 
6    …… 
7  } 
8  …… 
9}

Hide on All Platforms Example