Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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:


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(