How do I align 2 different elements in header?

Question

I am working on my wife's business site at invisionbilling.com and I am having difficulties vertically aligning the email address and the social icons in the header. I would like to align the email address vertically in the center of the header bar. This would also make it align with the social icons. I have been inspecting the elements and looking at the CSS but can't seem to make the right adjustment. Below is the CSS I believe that is affecting it. Can anyone help me fix this? Thanks!

div#header-widget-area {
    float: right;
    padding-left: 25px;
}

header .header_top .header_link {
    list-style: none;
    text-align: right;
    margin: 0;
}

header .header_top .header_link li {
    display: inline-block;
    margin-left: 10px;
    position: relative;
}

Please attach your HTML and append a code snippet (the button with the icon of `<>`). — Chayim Friedman, Jul 19 '18 at 17:49
I'm sorry. I'm not sure exactly what you mean. Are you saying I should copy and paste the HTML from inspect element? — Two Guys Playing Zelda, Jul 19 '18 at 18:17
Or from the 'View Source' (Ctrl + U in Chrome). And click the button with the icon `<>`, in the box 'HTML' write the HTML code and in the box 'CSS' write your CSS code. It enables we to run your code inside SO (with the button 'Run code snippet'). — Chayim Friedman, Jul 19 '18 at 18:57
It's in the toolbar, an icon of a paper with `<>` inside. It has a tooltip 'JavaScript/HTML/CSS snippet Ctrl-M' and shortcut Ctrl+M. — Chayim Friedman, Jul 20 '18 at 07:16

score 0 · Accepted Answer · answered Jul 19 '18 at 19:48

0

Looks like you've got a case of the clearfix.

Just add the "clearfix" class to your "header_link" element, then your CSS for the email li tag:

header .header_top .header_link li {
    display: inline-block;
    margin: 9px 5px;
    position: relative;
}

That should fix it up! Read more about clearfix here: What is a clearfix?

answered Jul 19 '18 at 19:48

Breezy

74
2
14

I couldn't get that to work. How do I add a "clearfix" class to my "header_link" element? I'm looking through my header.php file and it is showing
– Two Guys Playing Zelda Jul 19 '18 at 20:33
Ah, my mistake for not being more clear! Just like this:
– Breezy Jul 19 '18 at 21:09
@TwoGuysPlayingZelda Don't forget to accept the answer if it's correct :) – Breezy Jul 25 '18 at 13:19
I could not get that one to work but that doesn't mean it doesn't work. I might have not gone about it correctly. What I ended up doing was adding 2 header widget areas and I floated one left and one right. Thanks everyone for your help! – Two Guys Playing Zelda Jul 26 '18 at 14:05
1
Breezy, I just saw your comment that said to use
– Two Guys Playing Zelda Jul 26 '18 at 14:07
@TwoGuysPlayingZelda No problem at all! Just happy to hear you got it working! – Breezy Jul 26 '18 at 15:33

How do I align 2 different elements in header?

1 Answers1