CODEWITHSUNDEEP
csshtmlnavigationbar
game symbol
game symbol

Reputation: 135

css how to add a navigation bar under other navigation bar

I wanted to make another navigation bar under the first navigation bar but It's not working how to change my css to achieve what I want?enter image description here

This is my css coding

.firstnav
{
float:left;
list-style-type: none;
margin-top:50px;
margin-left:80px;
}

.secondnav
{
float:left;
list-style-type: none;
margin-top: 90px;
margin-right: 80px;
}


ul li
{
display: inline-block;
}


ul li a
{
    text-decoration:none;
color: #fff;
    padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;

}


ul li a:hover
{
    background-color: #fff;
color:#000;
}


ul li .active a
{
    background-color: #fff;
color: #000;

}


.logo img
{
float: left;
width: 150px;
height: auto;
margin-top: 20px;
}

    .main
{
max-width: 1500px;
margin: auto;
}

and this is my html coding

<body>
    <header>
        <div class="main">
<ul class="firstnav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <ul class="secondnav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

    </div>

I have try lots of ways to solve this but still in problem, I try to change the .secondnav margin but its not working, it move weird not horizontal and vertical, it move oblique.

Upvotes: 0

Views: 55

Answers (2)

לבני מלכה
לבני מלכה

Reputation: 16251

You can use display:flex to firstnav/secondnav instead inline-block

and set justify-content: flex-end; to secondnav to float right

See code below and mark up:https://jsfiddle.net/tq27n1xg/5/

body {
    background: black;
}
.firstnav
{
    padding-left: 0;
  display:flex;
list-style-type: none;
margin-top:50px;
}

.secondnav
{
display:flex;
list-style-type: none;
margin-top: 30px;
justify-content: flex-end;
}

ul li a
{
    text-decoration:none;
color: #fff;
    padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;

}


ul li a:hover
{
    background-color: #fff;
color:#000;
}


ul li .active a
{
 background-color: #fff;
color: #000;

}


.logo img
{
float: left;
width: 150px;
height: auto;
margin-top: 20px;
}

    .main
{
max-width: 1500px;
margin: auto;
}
<body>
    <header>
        <div class="main">
<ul class="firstnav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <ul class="secondnav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

    </div>

Tou your comment:

the first bar home alignment with the second bar home

use display:flex to main and use margin-top: 57px; to second:https://jsfiddle.net/tq27n1xg/17/

Upvotes: 2

user8417088
user8417088

Reputation:

try to use display:flex

replace your css with this code 

    .main{
    display: flex;
    flex-direction: column;
}
.firstnav{
    display: flex;
    flex-direction: row;
    justify-content: space-around
}
.secondnav{
    display: flex;
    flex-direction: row;
    justify-content: space-around
}

and then add the styling you want.

this code only position the navs the way you wanted.

Upvotes: 0

Related Questions