When you are adding long content in CKEditor 5 classic, on scroll the toolbar bees fixed to the top in the browser window.
But I have a fixed positioned white logo area with a menu bar beneath and the toolbar appears above them:

How can I make it stay under my fixed header/navigation?

When you are adding long content in CKEditor 5 classic, on scroll the toolbar bees fixed to the top in the browser window.
But I have a fixed positioned white logo area with a menu bar beneath and the toolbar appears above them:

How can I make it stay under my fixed header/navigation?

• javascript
• ckeditor
• css-position
• ckeditor5

2 Answers 2

I've managed to find the answer:

1. You have to install npm install --save @ckeditor/ckeditor5-ui
2. Add to the config: viewportTopOffset : Number

example:

ClassicEditor.defaultConfig = {
toolbar: {      
    viewportTopOffset : 50,    <-- height of fixed header
    items: [
        'heading',
        '|',
        'highlight',
        '|',
        'bold',
        'italic',
        ...

I needed a way to dynamically determine the bottom of a fixed navbar, so I managed to work it out this way:

</nav> <!-- bottom of navbar -->
<div id="ccms---header---end"></div> <!-- add a div to mark the bottom -->

Then I created the following function:

function getDistanceFromTop() {
    let element = document.getElementById('ccms---header---end');
    let distance = 0;
    while (element) {
        distance += element.offsetTop;
        element = element.offsetParent;
    }
    return distance;
 }

Then, in the editor initialization, I did the following:

ClassicEditor
.create( document.querySelector( '#editor' ), {
    licenseKey: LICENSE_KEY, // Or 'GPL'.
    plugins: [ Essentials, Paragraph, Bold, Italic, Font ],
    toolbar: [
        'undo', 'redo', '|', 'bold', 'italic', '|',
        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
    ],
    ui: {
        viewportOffset: {
            top: getDistanceFromTop(),
        }
    }
})
.then( editor => {
    window.editor = editor;
} )
.catch( error => {
    console.error( error );
} );