Is there any way i can make WebViewer nav sticky by default?

Technical Support
1

Product: @pdftron/webviewer

Product Version: ^11.4.0

Please give a brief summary of your issue: Unable to find a way to make sticky or fix Navbar of WebViewer
(Think of this as an email subject)

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

I need a way to make navbar sticky, I’ve tried overriding css but does not worked any help would appreciate. Note: I’m currently using demo key

Sample code

   WebViewer({
        path: '/lib/webviewer',
        licenseKey: import.meta.env.PDFTRON_API_KEY,
        useDownloader: false,
        customHeaders: {
          'Cache-Control': 'no-cache'
        },
        preloadWorker: 'pdf',
        enableOptimizedWorkers: true
      }, ref.current)
        .then((instance) => {

    ----

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


To make the navigation bar of WebViewer sticky, you will need to apply custom CSS to override the default styles. The WebViewer UI is customizable, and you can inject your CSS to achieve this effect.

Some things you can try:

  • Identify the CSS class or ID of the navigation bar in the WebViewer’s DOM.

  • Create a custom CSS file in your project where you define styles to make the navigation bar sticky.

  • Use CSS properties like position: sticky or position: fixed to ensure the navigation stays in place.

  • Make sure your custom CSS is loaded after the default WebViewer styles so it can override them.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
3

Hi sandesh,

Could you please provide a screenshot of the desired result you are trying to get?

Do you want the default-top-header to be sticky at the top of the page?

Best Regards,
Mickaël.

1 Like