Jump to content

Using Flex box right alignment navbar (Media queries problem)


Ayon Bit

Recommended Posts

 

PROBLEM :::       .navbar >:nth-child(3){margin:auto; }   hover is not working in the media quires. Is there any other solution for this code? 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        *{box-sizing: border-box;}
        .navbar {
            display: flex;
            background-color: #333; }
        
        .navbar > :nth-child(3){
            margin-right: auto;
        }
        .navbar a{
            color: white;
            text-align: center;
            text-decoration: none;
            padding: 14px 20px;
        }
        .navbar a:hover {
            background-color: #A4A1A1;
        }
        @media screen and (max-width:700px){
            .navbar {
                flex-direction: column;
            }
            .navbar >:nth-child(3){
                margin:auto;
            }
        }
    </style>
</head>

<body>
    
    <div class="navbar">
        <a href="#">Home</a>
        <a href="#">News</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    
    </div>
    
    
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        *{box-sizing: border-box;}
        .navbar {
            display: flex;
            background-color: #333;
       
        }
        
        .navbar > :nth-child(3){
            margin-right: auto;
        }
        .navbar a{
            color: white;
            text-align: center;
            text-decoration: none;
            padding: 14px 20px;
        }
        .navbar a:hover {
            background-color: #A4A1A1;
        }
        
        @media screen and (max-width:700px){
            .navbar {
                flex-direction: column;
            }
            .navbar >:nth-child(3){
                margin:auto;
            }
        }
    </style>

</head>

<body>
    
    <div class="navbar">
        <a href="#">Home</a>
        <a href="#">News</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    
    </div>
    
    
</body>
</html>

 

 

Screenshot_78.jpg

Edited by Ayon Bit
IMAGE ADDED
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...