CODEWITHSUNDEEP
htmlcss
BlueRose
BlueRose

Reputation: 41

How to align Navbar list to the right side of the logo in the navbar?

I just started taking an HTML/CSS class for beginners and we have a final project where we need to create a multi-page website so I am currently practicing by making a website of my own but I can't seem to figure out how to align the navbar list I have to right of the logo where the logo is on the left side of the navbar.

Here's my code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Final Project Practice</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="navbar">
        <nav>
                <a href="#">
                    <img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
                </a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>

</body>
</html>

CSS:

body {
    background: black;
    margin: 0;
    color: white;
}

.navbar {
    background-color: white;
    display: block;
}

.navbar a  {
    display: inline-flex;
}

.logo {
    width: 5em;
    margin: 1em;
    border-radius: 50%;
    background-color: black;
    float: left;
    position: relative;
}
.navbar ul{
    display: flex;
    list-style: none;
    margin: 0px 25px 0px 90px;
    padding: 0;
}

.navbar ul li a {
    list-style: none;
    text-decoration: none;
    color: var(--primary-color);
    font-size: 1.5em;
    font-weight: bold;
    margin-right: 1em;
}

All help would be appreciated!

Upvotes: 0

Views: 73

Answers (3)

user16639239
user16639239

Reputation:

Easiest way to create a navbar. Have a look

You need to adjust Width of the images and use this property to align image to left float:left

      body,
div {
    margin: 0;
    border: 0 none;
    padding: 0;
    background-color: rgb(65, 63, 63);

}

.md {
    background-color: black;
    padding: 20px;

}

a {
    color: white;
    text-decoration: none;
    padding: 15px;
}

a:hover {
    background-color: rgb(224, 224, 224);
    color: black;
}

img{
  width: 40px;
  height: 30px;
  float: left;
  margin-top: 15px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<img src="https://iconape.com/wp-content/files/zy/291859/png/291859.png">
    <div class="md">
     
        <a href="">HOME</a>
        <a href="">BAND</a>
        <a href="">TOUR</a>
    
    </div>

</body>

</html>

Upvotes: 0

Rahul Thakur
Rahul Thakur

Reputation: 166

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Final Project Practice</title>

    <link rel="stylesheet" href="css/main.css">
    <style>
        body {
            background: black;
            margin: 0;
            color: white;
        }
        
        .navbar {
            background-color: rgb(255, 238, 0);
            display: block;
            display: flex;
            align-items: center;
        }
        
        .navbar a {
            display: inline-flex;
        }
        
        .logo {
            width: 5em;
            margin: 1em;
            border-radius: 50%;
            background-color: black;
            float: left;
            position: relative;
        }
        
        .navbar ul {
            display: flex;
            list-style: none;
            margin: 0px 25px 0px 90px;
            padding: 0;
        }
        
        .navbar ul li a {
            list-style: none;
            text-decoration: none;
            color: rgb(0, 0, 0);
            font-size: 1.5em;
            font-weight: bold;
            margin-right: 1em;
        }
    </style>
</head>

<body>

    <nav class="navbar">

        <div class="logo">

            <a href="#">
                <img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
            </a>
        </div>
        <div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
    </nav>
    </div>
    </nav>

</body>

</html>

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

Set nav as flex container:

body {
    background: black;
    margin: 0;
    color: white;
}

nav {
  display: flex;
  align-items: center;
  background-color: white;
}


.logo {
    width: 5em;
    margin: 1em;
    border-radius: 50%;
    background-color: black;
}
.navbar ul{
    display: flex;
    list-style: none;
    /*margin: 0px 25px 0px 90px;*/
    padding: 0;
}

.navbar ul li a {
    list-style: none;
    text-decoration: none;
    color: black;
    font-size: 1.5em;
    font-weight: bold;
    margin-right: 1em;
}
<body>
    <div class="navbar">
        <nav>
            <a href="#">
                <img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
            </a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>

</body>

Upvotes: 1

Related Questions