The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More
Light
Dark
System
Ask  Question

Bootstrap on Laravel 8 change header color


I bought metronic.
I am using version 8.0.35 Theme 20 with Bootstrap installation on Laravel 8.
I'm trying to change the blue background-color of the hader but can't do it. Can you please help me?

Thank you


user
Daniele Del 4 years ago
Laravel Bootstrap 5
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
Sean Author 4 years ago

Hi,

You can edit demo20/src/sass/layout/_variables.scss the header style variables:


// Header

$header-config: (

z-index: 97,

bg-color: if(isDarkMode(), $page-bg, $primary),

box-shadow: if(isDarkMode(), none, 0px 10px 30px 0px rgba(82,63,105,0.08)),

height: (

desktop: (

default: 70px,

extended: 140px 

),

tablet-and-mobile: 55px

),

navs-bg-color: $body-bg,

navs-tab-height: 50px,

navs-tab-color: (

default: if(isDarkMode(), $gray-600, #C8E3FF),

hover: $gray-900,

active: $gray-900

),

menu: (

padding-x: 25px,

indention: 0.75rem,

)

) !default;


For more info about using Metronic please check the Theme Documentation
and Video Tutorials

Regards


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