Hmmm…
I’m not seeing a text overlay when I use:
#header .widget-area {
color: #FFFFFF;
padding: 0 0 5px;
text-align: right;
white-space: nowrap;
}
on line 218 of your style.css in Firefox 17.0.1.
I used “white-space: nowrap” because different browsers will use different fonts depending on what they have set/installed, and the “nowrap” will keep the text on single lines and adjust the width, where a fixed-width will cause the long line to wrap on some browsers, like mine.)
Thread Starter
bfoken
(@bfoken)
Thanks linux4me2, but that did not solve the problem. I tried both nowrap and normal for white-space, but neither changed the text overlay. The one thing I’ve noticed (while using FireBug) is that if I remove the “text-align: right” the overlay on the icons goes away, but then the tagline and phone number are in the wrong place. Any further ideas of how to keep the text in place and remove the overlay on the icons? Thanks again!
I may not be understanding what you mean by “text overlay.” To me, text overlay would mean the text of your phone number and business name would be on top of your social-networking icons, but I’m not seeing that in my browser. The social-networking icons are below the text by the 5px you’ve set for the padding.
Can you describe what you’re seeing?
Thread Starter
bfoken
(@bfoken)
Sorry for the ambiguity.
What I mean by the text overlay is the 6 social media icons have text on top of the icon. For instance, the email icon shows “mail”; the facebook icon has “book”, etc. etc. This show up on Firefox and Chrome. This link should show you what I’m seeing.
So, whenever I have “text-align: right” in the code the text over the icons is there. When that is removed the text is gone, but then the phone number and tagline are no longer right justified. It’s a catch-22! Let me know if that makes sense. Thanks!
Oh! Now I get it. I wasn’t seeing that at all in my browser.
Okay, try this. At the bottom of the style.css file for your theme, add the following:
.header-widget-site-info {
text-align: right;
white-space: nowrap;
}
Then, in the text widget that has your phone number and business name, wrap the text in a div or span and add the class you created above:
<div class="header-widget-site-info">
(415)926-9370<br>
Alameda County Real Estate Investments</div>
What you’re doing is creating a separate CSS class that only affects the text widget, and not all the widgets in the header.
Note: You can name the class whatever you like as long as there are no spaces or special characters other than the hyphen or underscore. I just picked “header-widget-site-info” for the example. The main thing is to make sure the name you choose isn’t used elsewhere in your CSS. I suggested you put it at the bottom of the file so it overrides any other alignment settings that apply to that area.
Thread Starter
bfoken
(@bfoken)
Thank you for all your help. Finally got it to work. Have yourself a great day!
Glad you got it working. I forgot to mention, you’ll need to remove the white-space and text-align from the #header .widget-area once you have it in the class for the site info.
