Header Justification

[defree99]

I have a website using the Executive Pro Theme here:

http://tinyurl.com/ouhzkgp

I am trying to get the Header Right Widget and Menu lines "block justified" (don't ask, it's a long story).

Please see the image here showing what I am trying to do.

1) Within the Header Right Widget I am trying to align the phone number to the left, and put the social media icons on the right - but on the same line

2) On the Menu line I am trying to make the menu items spread across the entire website , left justifying Home and right justifying Contact Us

3) I know this is stupid to do, but again, it's a long story.

How can I get these 2 things accomplished?

[WhiteleyDesigns]

For the navigation, if you plan on keeping that exact number of top level navigation links you could simply use CSS to expand them to fit the entire with, then center the text in each

[defree99]

The menu works great, thanks!

I made the adjustments to the header, but I can't seem to get the who;e thing to float right.

I'm trying to get the social media icons to right-justify.

Can you see what I might have done wrong?

[WhiteleyDesigns]

You almost have it - you just need to right-align the text in the new 'right' div you created. So the css on that div should be:

.right {
     width: 400px;
     float: right;
     text-align: right;
}

You'll want to make sure you edit the fixed pixel width objects to percentages when doing media queries to ensure it renders properly across smaller devices.

---

Matt Whiteley – WhiteleyDesigns, GitHub
Designing, Developing & Creating with WordPress

[defree99]

Perfect.

Thanks for everything!

Last quick question:

1) I edited the fixed pixel width objects to percentages, so it renders properly across smaller devices and it looks fine.

2) But is there a way to make my wrapper an "if then" kind of wrapper?

3) So that on desktops the whole thing displays on a single line. But on smartphones/tablets, the Right Div wraps down to the line below the Left DIV?

[WhiteleyDesigns]

You would want to use media queries for that:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Basically, you apply different CSS inside each media query. Each media query describes a different element, such as screen size, screen type, device orientation. In simplest for you could use something like this:

@media (max-width: 499px) {
p {
     font-size: 12px;
}
}

That would simply change the paragraph font size to 12px on any screens once the width goes under 500px, but would remain the normal font size you have set on anything over 499px. Hope that helps!

Matt

---

Matt Whiteley – WhiteleyDesigns, GitHub
Designing, Developing & Creating with WordPress

[Author]

Posts