Problem aligning navbar on the right

Question

Problem aligning navbar on the right

Navigation

#1 by (1 votes)

2

Hello, I'm new to css and I'm having trouble trying to align the buttons on my right% with%; so I can put a logo on the left.

Here's my code!

.menu, .menu ul li {
        margin: 0;
        padding: 0;
    }
    
    .menu {
        background-color: #fff;
        width: 100%; 
        white-space: nowrap; /* impede que os menus quebrem */
        text-align: center; 
    }
    
    .menu > ul > li {
        background-color: #fff;
        position: relative;
        list-style-type: none;
        display: inline-block;
        width: 170px;
    }
    
    .menu > ul > li > a {
        font-size: 90%;
        font-weight: bold;
        padding: 15px 0;
        color: #74C8D2;
        text-decoration: none;
        display: block;
    }
    
    .menu > ul > li > a:hover {
        color: #fff;
        background-color: #74C8D2;
        transition: all .5s ease-in-out;
    }
    
    .menu > ul > li > a::after,
    .menu > ul > li > a::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        content: "";
        opacity: 0;
    }
    
    .menu > ul > li > a::after {
         top: 100%;
         background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
        background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    }
    
    .menu > ul > li > a::before {
         top: -5px;
         background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
         background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    }
    
    .menu > ul > li > a:hover::after,
    .menu > ul > li > a:hover::before {
        opacity: 1;
    }
    
    .menu > ul > li > a > i {
        vertical-align: middle;
    }
    
    
    
    /* submenu */
    
    .sub-menu {
        width: 100%;
        padding:5px 0px;
        position:absolute;
        top:100%;
        left:0px;
        z-index:-1;
        opacity:0;
        transition: all .5s ease-in-out;
        background:#fff;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        }
    
    .menu li:hover .sub-menu {
        z-index:1;
        opacity:1;
        }
    
    
    .sub-menu li {
        display:block;
        font-size:16px;
        }
    
        .sub-menu li a {
        padding:10px 30px;
        display:block;
        text-decoration: none; 
        color: #74C8D2;    
        }
    
        .sub-menu li a:hover, .sub-menu .current-item a {
        background:#74C8D2;
        color: #fff; 
        transition: .5s ease-in-out;    
        }

<div class="row">
       <nav class="menu menu-js">
          <ul>
             <li><a href="#about_us"><i class="ion-ios-search-strong icon-small clearfix"></i>SEARCH</a></li>
             <li><a href="#search"><i class="ion-ios-people icon-small clearfix"></i>TOP ARTISTS</a></li>
             <li><a href="#top_artists"><i class="ion-ios-person icon-small clearfix"></i>ABOUT US</a></li>
             <li><a href="#contacts"><i class="ion-ios-telephone icon-small clearfix"></i>CONTACTS</a></li>
             <li>
                <a href="#contacts"><i class="ion-ios-unlocked icon-small clearfix"></i>SETTINGS</a>
                <ul class="sub-menu">
                   <li><a href="#">LOGIN</a></li>
                   <li><a href="#">REGISTER</a></li>
                </ul>
             </li>
          </ul>
       </nav>
    </div>

Thanks in advance!

I've tried floats and aligns, but nothing works properly!

html css menu nav-bar

asked by anonymous 30.04.2018 / 12:47

1 answer

Error creating a distribution of an executable with sql database using the Entity Framework Alternative money_format in php on windows

score 1 · Accepted Answer

You can only align with text-aling:right .

I've taken advantage of and already includes the logo if you want to use this way the left and menu the right

OBS: As you have not yet done the responsive treatment it will open up a bit weird in Snippet here to StackOveflow, but if you display in "All Page" it looks good can you test there)

.menu,
.menu ul li {
    margin: 0;
    padding: 0;
}

.menu {
    background-color: #fff;
    width: 100%;
    white-space: nowrap;
    /* impede que os menus quebrem */
    text-align: center;
}
 /* classe da logomarca */
.logo {
    float: left;
    margin-top: 4px;
}
.menu ul {
/* alinhamento a direita */
    text-align: right;
    padding: 0;
}

.menu>ul>li {
    background-color: #fff;
    position: relative;
    list-style-type: none;
    display: inline-block;
    width: 170px;
    text-align: center;
}

.menu>ul>li>a {
    font-size: 90%;
    font-weight: bold;
    padding: 15px 0;
    color: #74C8D2;
    text-decoration: none;
    display: block;
}

.menu>ul>li>a:hover {
    color: #fff;
    background-color: #74C8D2;
    transition: all .5s ease-in-out;
}

.menu>ul>li>a::after,
.menu>ul>li>a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    content: "";
    opacity: 0;
}

.menu>ul>li>a::after {
    top: 100%;
    background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu>ul>li>a::before {
    top: -5px;
    background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu>ul>li>a:hover::after,
.menu>ul>li>a:hover::before {
    opacity: 1;
}

.menu>ul>li>a>i {
    vertical-align: middle;
}



/* submenu */

.sub-menu {
    width: 100%;
    padding: 5px 0px;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    transition: all .5s ease-in-out;
    background: #fff;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.menu li:hover .sub-menu {
    z-index: 1;
    opacity: 1;
}


.sub-menu li {
    display: block;
    font-size: 16px;
    text-align: center;
}

.sub-menu li a {
    padding: 10px 30px;
    display: block;
    text-decoration: none;
    color: #74C8D2;
}

.sub-menu li a:hover,
.sub-menu .current-item a {
    background: #74C8D2;
    color: #fff;
    transition: .5s ease-in-out;
}

<div class="row">
   <nav class="menu menu-js">
  <img class="logo" src="http://unsplash.it/100/40"alt="">
  <ul>
     <li><a href="#about_us"><i class="ion-ios-search-strong icon-small clearfix"></i>SEARCH</a></li>
     <li><a href="#search"><i class="ion-ios-people icon-small clearfix"></i>TOP ARTISTS</a></li>
     <li><a href="#top_artists"><i class="ion-ios-person icon-small clearfix"></i>ABOUT US</a></li>
     <li><a href="#contacts"><i class="ion-ios-telephone icon-small clearfix"></i>CONTACTS</a></li>
     <li>
        <a href="#contacts"><i class="ion-ios-unlocked icon-small clearfix"></i>SETTINGS</a>
        <ul class="sub-menu">
           <li><a href="#">LOGIN</a></li>
           <li><a href="#">REGISTER</a></li>
        </ul>
     </li>
  </ul>
   </nav>
</div>