I currently have a navigation bar on my webpage that is styled with the following CSS properties:
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
}
My question is, how can I change the justify-content: start value? I've tried making this change using SASS but it doesn't seem to work as expected.
In my styles.scss file, I attempted to modify the navbar class like so:
.navbarChange{
@extend .navbar;
justify-content:start;
display:inline-flex;
}
Even after updating the HTML and variables in _variables.scss, the property does not get overwritten. Any insights or assistance would be greatly appreciated.
Here's what I have in my updated _variables.scss file:
.navbar
{ &.navbarChange
{
justify-content:start ;
display:inline-flex;
}
}
Within my HTML, I have applied the navbarChange class to the nav element, like so:
<nav class="navbar navbarChange navbar-dark bg-dark ">
<a class="navbar navbarChange" href="#">
Despite these changes, the desired effect still doesn't take place.
Further adjustments were made in my styles.scss file, where I imported Bootstrap and custom variables:
@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import "variables";