Topbar responsiveness bug (React Demo2)

Hi there,

There is a bug when changing the size of the screen from responsive to desktop width. The top menu gets duplicated. You can see this behaviour on this link:

https://ibb.co/frcCnML

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Hi,

Thank you for your message,
Great catch, I've added the bug ticket into our development backlog. The fix will be released in incoming releases.

Regards,
Keenthemes support

Dear friends we have the same problem, this must be solved immediately, there is no waiting for future releases, they must make a definite correction and immediately, if we cannot request this, we will ask for a refund of the money.

you must understand that if this is not corrected the entire template is practically unusable,

Try next:
1) In file demo8/src/_metronic/layout/components/header/Header.tsx add id='kt_header_menu' attribute to the div.
2) In file demo1/src/_metronic/assets/ts/components/_SwapperComponent.ts change the method update method to the next:

public update = () => {
const parentSelector = this.getOption('parent')?.toString()
const mode = this.getOption('mode')
const parentElement = parentSelector ? document.querySelector(parentSelector) : null
if (parentElement && this.element.parentNode !== parentElement) {
const alreadyPended = document.getElementById('kt_header_menu') !== null
if (!alreadyPended) {
if (mode === 'prepend') {
parentElement.prepend(this.element)
} else if (mode === 'append') {
parentElement.append(this.element)
}
}
}
}

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(