Jump to content

Vertical align for nav userinfo block


Recommended Posts

I do not know who made design for you but it is kind of terrible.

 

The part of HTML:

<nav><!-- Block user information module NAV  -->
<div class="header_user_info">
<a class="login" href="http://www.vivrenaturellement.com/labo/mon-compte" rel="nofollow" title="Identifiez-vous">
Connexion
</a>
</div>
<!-- /Block usmodule NAV -->
<!-- Block languages module -->
<!-- /Block languages module -->
<div id="contact-link" >
<a href="http://www.vivrenaturellement.com/labo/nous-contacter" title="Contactez-nous">Contactez-nous</a>
</div>
<span class="shop-phone">
<i class="icon-phone"></i>Appelez-nous au : <strong>09 70 40 88 87</strong>
</span>
</nav>

CSS code for the lock is:

 

.header_user_info a.login:before {
    content: "\f023";
}

No font size.

 

CSS code for the envelope is:

#contact-link a:before {
    content: "\f0e0";
    color: #888;
    font-family: "FontAwesome";
    margin: 0 5px;
    font-size: 16px;
}

Font size is 16

 

CSS code for the phone:

.shop-phone i {
    font-size: 21px;
    line-height: 21px;
    color: #fff;
    padding-right: 7px;
}

Font size is 21

 

You have to have the same font size in all cases.

Link to comment
Share on other sites

The size of connexion and contact is 13px, but I could not find the code.

size of phone is 12px

CSS:

nav .shop-phone strong {    font-size: 12px;}

There is also big gap before the phone because of the align center. CSS:

header .nav nav {    width: 50%;    margin-left: auto;    margin-right: auto;    border: 1px solid #000;    height: 20px;    text-align: center;}

You also have float left for the first two and not for the last one.

Link to comment
Share on other sites

Regarding the size of the connection and contact are 16px, no ? In the main css file of the theme :

#contact-link a:before {    content: "\f0e0";    color: #000;    font-family: "FontAwesome";    margin: 0 5px;    font-size: 16px;}
.header_user_info a.login:before {    content: "\f023";    color: #000;    font-family: "FontAwesome";    margin: 0 5px;    font-size: 16px;}

However it looks the the connexion is a bit smaller than contact...

 

And yes I tried to add text-align-center in the nav container because I also want these blocks to be centered in the nav.

Not easy....

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...