Currently, I am in the process of developing a web application using Node JS, React, and Bootstrap. Within the application, I have implemented a main menu and a secondary menu using tabs. I have successfully defined a style for the main menu, but I am facing challenges when trying to apply a different style to the secondary menu. It seems that the style changes I make to the secondary menu end up affecting the main menu as well.
While I have managed to personalize the font size of the tabs in the secondary menu, I am struggling to customize the background color of these tabs.
Here is my current setup:
https://i.sstatic.net/NfAnJ.png
I am aiming to give the secondary menu a unique font size and background color. To achieve this, I attempted to overwrite the following styles:
.nav-pills .aux{
font-size: 12pt !Important;
}
.nav-link.active .aux{
background-color: #1302ff !Important;
}
Below is the code snippet for the secondary menu:
<Tab.Container id = "submenu" defaultActiveKey = "home">
<Row>
<Col md = {12}>
<Nav justify variant="pills">
<Nav.Item>
<Nav.Link className = "aux" eventKey = "home">Home</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link className = "aux" eventKey = "teams">Teams</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link className = "aux" eventKey = "results">Results</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link className = "aux" eventKey = "stats">Statistics</Nav.Link>
</Nav.Item>
</Nav>
</Col>
</Row>
</Tab.Container>
While the first style change I attempted worked, allowing me to alter the tab font size, the second style change did not take effect.
How can I successfully apply a background color to the tabs in the secondary menu?
Edit I:
I tried adding an id to the nav.link and modifying the style using this id, but unfortunately, it did not work.
Here is the modified code:
<Nav.Item>
<Nav.Link id = "home" className = "aux" eventKey = "home">Home</Nav.Link>
</Nav.Item>
Additionally, here are my updated styles:
.nav-pills .aux{
font-size: 12pt !Important;
}
#home .nav-link.active .aux{
background-color: #1302ff !Important;
}
Unfortunately, these changes did not reflect in the design.
EDIT II:
When I add a class to the Nav tag, it does not work for me. In fact, I lose the custom font size.
https://i.sstatic.net/6o71X.png
Code:
<Nav justify variant="pills" className = "submenu">
<Nav.Item>
<Nav.Link className = "aux" eventKey = "home">Home</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link className = "aux" eventKey = "teams">Teams</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link className = "aux" eventKey = "results">Results</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link className = "aux" eventKey = "stats">Statistics</Nav.Link>
</Nav.Item>
</Nav>
CSS:
.submenu > .nav-pills .aux{
font-size: 12pt !Important;
}
.submenu > .nav-link.active .aux{
background-color: #1302ff !Important;
}