Vertical align for nav userinfo block

[renaud2263]

Hi all,

 

Could you help me to get a perfect vertical-align for these 3 links in the header (contact and phone)

 

http://www.vivrenaturellement.com/labo/

 

I'm lost...

 

Thank's !

[Simonas Invertus]

The problem is that envelope and phone are different sizes if you can make all icons the same size the problem will be solved.

Do you know where/how to edit CSS?

[renaud2263]

Hi and thanks,

 

I know several css files implicated in this navbar, such blockuserinfo.css, global.css and specific file from the theme.

But no, I don't know how I can modify the icon sizes...

[Simonas Invertus]

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.

[renaud2263]

Thanks !!!

Now i modified the icon sizes to 16.

Looks like better.

However the phone number is not at the same level...

Could you help me again even if the code is a kind of terrible

[Simonas Invertus]

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.

[renaud2263]

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....

[Simonas Invertus]

I do not know what to advice.

Only text can be centered with text-align not divs blocks.