Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Vue same Header Style like on html Version


Hi,

the vue js header (Navbar) has default a white background. Is there a setting value so that the navbar is like in the html version (transparent bg and on scroll white?


user
Johannes Kanthak 2 years ago
Bootstrap 5 Vue
1 Answers
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 (1)

user
Lauris Stepanovs Author 2 years ago

Hi Johannes,

Sorry for the delay in reply.

This is not expected behavior, the header should function the same way as in our HTML version, to fix this you can follow the steps below.

  1. Upadate src/assets/ts/components/_StickyComponent.ts with the code from this gist.
  2. Upadate /src/core/services/LayoutService.ts with code from this gist. The file already contains all required initialization if you have written any custom code in this file make sure to backup it before applying these changes.
  3. Add sticky header attributes on the element with id kt_app_header in file src/layouts/default-layout/components/header/Header.vue.

    data-kt-sticky="true"
    
data-kt-sticky-activate="{default: true, lg: true}"
    
data-kt-sticky-name="app-header-minimize"
    
data-kt-sticky-offset="{default: "200px", lg: "0"}"
    
data-kt-sticky-animation="false"




Regards,
Lauris Stepanovs,
Keenthemes Support Team
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  :(