Jump to content
Ayon Bit

Using Flex box right alignment navbar (Media queries problem)

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

Share this post


Link to post
Share on other sites

IF you mean it does NOT fill the whole width? You need to set margin to 0.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...