Trying to adjust the $navbar-height value through a mounted function in a Nuxt component has been successful overall, but I'm encountering issues with overriding Bulma variables.
I included Bulma in the Nuxt configuration:
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
'@nuxtjs/axios',
// Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
'@nuxtjs/bulma',
'@nuxtjs/font-awesome'
]
Furthermore, I made changes to some variables in my main.scss file:
@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/mixins';
@import '~bulma/sass/utilities/functions';
$primary: #3dccc8;
$danger: #dc5222;
$navbar-height: 5rem;
$navbar-item-img-max-height: 3rem;
@import '~bulma/bulma';
The main.scss file was also added to the Nuxt Config:
css: [
{ src: '~assets/css/main.scss', lang: 'scss' }
],
Despite these configurations, attempting to modify the variable in a component doesn't yield any results.
Below is the function being used:
mounted() {
this.$nextTick(function(){
window.addEventListener("scroll", function(){
var navbar = document.getElementById("nav")
var nav_classes = navbar.classList
if(document.documentElement.scrollTop >= 10) {
if (nav_classes.contains("shrink") === false) {
nav_classes.toggle("shrink");
console.log(nav_classes)
}
}
else {
if (nav_classes.contains("shrink") === true) {
nav_classes.toggle("shrink");
}
}
})
})
}