How change global header style on specific page only
I want to change the header style on the homepage specifically.
On the homepage header background color should be red & on the other page it should be white.
How it's possible in VSF
5 Replies
There are multiple ways how you can do it:
- Create another Header component and use it inside layout on other pages (not the best way).
- In your Header component you can add a style that will check the URL and if it's homepage (/) - give it bg color red if it's not homepage(/) give it style white
@skirianov I don't want to create a new header for it. is there any option to change the background color based on route url (page url)
yep, you can do it in the class (if you're using SFUI2) or you can add a class "home-page-bg-color", then add it in CSS (if you're using SFUI1)
and inside that new class (SFUI1) you can override header background color
But the header is global home-page-bg-color class will visible in all pages
I am using Vue: 2.6.14
@skirianov ??? waiting for your reply
override existing styles - https://docs.storefrontui.io/v1/?path=/docs/getting-started-development-guide-css-customization--page
if you add another class name with a new color it will override existing background colors like in any CSS code