Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Header background color


For Metronic 8.2.0, Demo 1 (HTML)

Is the Header container background color correct?
https://preview.keenthemes.com/metronic8/demo1/index.html

It should be white all the time?

The current behavior is:
It's transparent until you start scrolling the page, then, its white.

But, while transparent, the menu has a shadow. And it looks weird.

Is this intended?


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 (6)


For example, in react demo, background is white
https://preview.keenthemes.com/metronic8/react/demo1/dashboard



Hi,

The HTML version uses the latest Demo 1 style with comes with a slightly updated header. In the next update, we will update it for the React version as well.

Regards.



Ok, Demo1 HTML is the correct one. Got it.

But its correct?
It seems broken.

The header is transparent background and there is a shadow in the menu item.

Check image here: https://i.postimg.cc/P5kNcpy8/screenshot-preview-keenthemes-com-2023-10-22-13-37-07.png

Its weird.
Is this indended?



Hi,

Yes, it's intended. According to the updated design, the header's background color is transparent till it's scrolled.

Regards.



OK, transparent. Got it.

In that case, maybe it better to remove the shadow in the active item.

The shadow give the impression something is wrong with the design.

Thanks for replying, tho.



Hi,

Noted, we will discuss it with our design team.
If you need you can customize it on your end in src/sass/layout/header/_header.scss and remove box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03); from code line #115.

Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.

Regards.


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  :(