# Set Mobile Header Height

**URL:** <https://pdfjs.community/t/set-mobile-header-height/1794>\
**Category:** Technical Support\
**Created:** [June 21, 2022, 11:01am UTC](https://pdfjs.community/t/set-mobile-header-height/1794 "2022-06-21T11:01:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sviluppo](https://avatars.discourse-cdn.com/v4/letter/s/7993a0/32.png) [@sviluppo](https://pdfjs.community/u/sviluppo)\
**Post date:** [June 21, 2022, 11:01am UTC](https://pdfjs.community/t/set-mobile-header-height/1794/1 "2022-06-21T11:01:23Z")

</div>

**Which product are you using?**  
PDF.js Express Viewer

**PDF.js Express Version**  
UI Version: 8.4.1  
Core Version: 8.4.0

**Detailed description of issue**  
Header is too small on mobile

**Expected behaviour**  
Header Bar should be bigger on mobile like on desktop.

**Does your issue happen with every document, or just one?**  
This issue happen in every document on mobile

**Link to document**  
{Provide a link to the document in question if possible}  
I’m currently using the default document: [https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf](https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf)

**Code snippet**

```javascript
WebViewer({
            path: './node_modules/@pdftron/pdfjs-express-viewer/public', 
            licenseKey: 'xxxx',
            initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
        }, document.getElementById('viewer'))
            .then(instance => {
                // now you can access APIs through the WebViewer instance
                const { Core, UI } = instance;
                // adding an event listener for when a document is loaded
                Core.documentViewer.addEventListener('documentLoaded', () => {
                    console.log('document loaded');
                });

                instance.UI.setHeaderItems(function (header) {
                    const items = header.getItems()
                    //remove element from items array
                    items.splice(0, 3)
                    header.update(items);
                });
            });

```

Best Regards,  
Andrea

 ![Schermata 2022-06-21 alle 12.54.13](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/cf8306172e54aedb2d5b7eaeca7aa07681bf5c36.png)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [June 21, 2022, 11:01am UTC](https://pdfjs.community/t/set-mobile-header-height/1794/3 "2022-06-21T11:01:26Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Customize toolbar in viewer - Header items - CustomElement](https://pdfjs.express/documentation/ui-customization/customizing-header.8#customelement)
- [UI & toolbar customization sample](https://pdfjs.express/documentation/ui-customization/samples)
- [Hiding/Showing DOM elements in WebViewer UI - List of elements](https://pdfjs.express/documentation/ui-customization/hiding-elements#list-of-elements)

APIs:
- [WebViewerInstance - setActiveHeaderGroup(headerGroup)](https://pdfjs.express/api/7.0/WebViewerInstance.html#setActiveHeaderGroup__anchor)
- [UI - enableDesktopOnlyMode()](https://pdfjs.express/api/UI.html#.enableDesktopOnlyMode__anchor)
- [Core.DocumentViewer - setScrollViewElement(scrollViewElement)](https://pdfjs.express/api/Core.DocumentViewer.html#setScrollViewElement__anchor)

Forums:
- [Create new toolgroup](https://pdfjs.community/t/create-new-toolgroup/149/4)
- [How to set default page transition when viewer loads](https://pdfjs.community/t/how-to-set-default-page-transition-when-viewer-loads/761/5)
- [How to set the maximum size of an annotation?](https://pdfjs.community/t/how-to-set-the-maximum-size-of-an-annotation/1068/4)

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [June 21, 2022, 10:31pm UTC](https://pdfjs.community/t/set-mobile-header-height/1794/4 "2022-06-21T22:31:12Z")

</div>

Hello sviluppo,

1. What is your device’s resolution?
2. When I view on my Samsung Galaxy S22 Ultra the header seems to work correctly.
3. Are you applying any custom CSS to the viewer?

Best regards,  
Tyler Gordon  
Web Development Support Engineer  
PDFTron

---

<div class="post-metadata">

**Author:** ![sviluppo](https://avatars.discourse-cdn.com/v4/letter/s/7993a0/32.png) [@sviluppo](https://pdfjs.community/u/sviluppo)\
**Post date:** [June 22, 2022, 7:04am UTC](https://pdfjs.community/t/set-mobile-header-height/1794/5 "2022-06-22T07:04:24Z")

</div>

Hi @tgordon,  
Thanks for your answer. The problem is solved, I think it is solved when I add the css in this directory: ./node\_modules/@pdftron/pdfjs-express-viewer/public/ui/style.css but I’m not 100% sure.