CODEWITHSUNDEEP
htmlcss
Ledwing
Ledwing

Reputation: 311

Align text of all nav menu items

I have a menu in my website which is not aligned.

Picture

enter image description here

How do I go about aligning all the text of nav menu with the text of the blue button on right? I have tried the following code which doesn't seem to work right.

HTML

  <nav class="navbar bg-color3">
  <div class="container-fluid">
    <a href="#"><img src="/Content/images/uploads/photo-01.png" width="410" alt="PG Portal de Gastos" style="float: left; margin: 18px 10px 10px 0;"></a>
    <button class="round-toggle navbar-toggle menu-collapse-btn collapsed" data-toggle="collapse" data-target=".navMenuCollapse">
      <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navMenuCollapse">
      <div class="login-panel">
        <ul id="nav-list" class="nav pull-right">
          <li><a href="#intro-center-image" class="btn btn-default goto" style="border: 1px solid transparent;">Inicio</a></li>
          <li><a href="#benefits-grid-num-2" class="btn btn-default goto" style="border: 1px solid transparent;">Beneficios</a></li>
          <li> <a href="#benefits-grid-images" class="btn btn-default goto" style="border: 1px solid transparent;">Funcionalides</a></li>
          <li><a href="#price-3col" class="btn btn-default goto" style="border: 1px solid transparent;">Planes</a></li>
          <li><a href="#contact-full" class="btn btn-default goto" style="border: 1px solid transparent;">Contacto</a></li>

                                <li class="sub-menu-parent">
                                    <a class="btn " href="#">Iniciar Sesión <i class="icon right-icon icon-login"></i></a>
                                    <ul class="sub-menu">
                                        <li>
                                                <a class="btn btn-primary" style="border: 1px solid transparent;" href="@Url.Action("Login", "Cuenta")">
                                                    Portal 
                                                </a>
                                        </li>
                                        <li>
                                            <a class="btn btn-primary" style="border: 1px solid transparent;" href="http://web.com/">
                                                Portal
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <a class="btn btn-primary" href="@Url.Action("Registrar", "Cuenta")">
                                    Iniciar Prueba<i class="icon right-icon icon-download"></i>
                                </a>
                            </ul>

    </div>

                    </div>
                </div>
            </nav>

Upvotes: 1

Views: 41

Answers (3)

Salmanul Faris
Salmanul Faris

Reputation: 356

use padding instead of height for both (adjust padding-bottom and padding-top for height problems) try in both blue and white space

Upvotes: 0

Sebastian Brosch
Sebastian Brosch

Reputation: 43564

You have to remove the padding on .navbar .nav li:

.navbar .nav li {
    padding:0;
    float:left;
}

At the moment there is a padding:5px which causes a gap aroud the buttons.

Upvotes: 2

lleto
lleto

Reputation: 684

The problem is in the padding of the .navbar .login-panel .btn class. If you remove the padding there ( padding: 0 20px; ) the text is horizontally lined. If you want the padding in the rest of the menu make specific padding for each of the classes.

Upvotes: 1

Related Questions