How do I display my icon on the far left of the box component in ReactJs

I want to display my globe Icon to the far right end of the box … Read more How do I display my icon on the far left of the box component in ReactJs

I want to display my globe Icon to the far right end of the box (as i have marked in red)
I have tried everything but it dosen’t move.. If i change the position to absolute it gives me double globe icon somehow .I have also tried align contents , margin and padding but nothing works. If any one knows how to change that please help.

The globe Icon

const Navbar = () => {
    const [flagDropdownIsVisible, setFlagVisibility] = useState(false);
    return (
        <>
                <NavbarContainer>
                    <NavLogo to= '/'>
                        <img src={logo} alt='logo' width="150" height="30" />
                        </NavLogo>
                        
                    <LanguageButtonWrapper>
                    <RoundButton onClick={() => setFlagVisibility(true)}>
                        <img src= {globe} alt="" />
                    </RoundButton>
                 
                    <LanguageDropdown

                        isVisible={flagDropdownIsVisible}
                        setIsVisible={setFlagVisibility}
                        position={{ left: 0 }}
                    />
                </LanguageButtonWrapper> 

                                    
                </NavbarContainer>
        </>
    )
}

export default withTranslation() (Navbar);
import styled from 'styled-components';
import { Link as LinkR } from 'react-router-dom'


export const NavbarContainer = styled.div `
    display: flex;
    justify-content: space-between;
    height: 500px;
    z-index: 1;
    width: 80%;
    padding-top: 20px;    
    max-width: 1100px;
`;

export const NavLogo = styled(LinkR)
`
    left:0;
    padding-top: 10px;
    padding-left:25px;
    
    
`;


export const Icon = styled.div `
    display:block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 60%);
    font-size: 1.8rem;
    cursor: pointer;
`;


export const RoundButton = styled.button `
-moz-box-align: center;
align-items: center;
justify-content: center;
border-radius: 20px;
padding: 0px;
height: 40px;
width: 40px;
border: 1px solid rgb(38, 36, 57);
background-color: rgb(28, 26, 40);
position: relative;
  
cursor: pointer;
display: flex;

`;

export const LanguageButtonWrapper = styled.div `
    position:relative;    
`;

Source: CSS – Stack Overflow


Categories: NewsTags: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *