Currently, I am working with the most recent version of Bootstrap and aiming to switch between the recognizable X icon and a hamburger menu. It seems like these two icons are overlapping each other, and I'm unsure if I can modify the default 3 lines of the menu.
There are two main questions that arise from this situation:
How can I effectively toggle between these two icons?
When the menu is activated, I expect it to cover the entire screen in white (at the moment, it doesn't achieve full white coverage)
Unfortunately, I don't have a sandbox example available for reference right now.
Your insights and suggestions on this matter would be greatly appreciated!
/*JSX code*/
import React from 'react';
import { NavigationBarStyled } from './style';
import { Nav, Navbar } from 'react-bootstrap';
//IMAGES
import logo from '../../images/adyslogo.png';
import Image from 'react-bootstrap/Image';
import { GrCart } from 'react-icons/gr';
import CloseButton from '../../images/closebutton.svg';
// Rest of the JSX code remains same as provided in the original text
export default NavigationBar;
/*CSS*/
import styled from 'styled-components';
export const NavigationBarStyled = styled.nav`
.navbar {
background-color: #FFF;
height: 80px;
}
// CSS styling continues...
`;