Contact info on right side of Header
 

So I've used some of the tips mentioned here on how to add contact info on the right side of the header, all helpful so far, thanks. However I was wondering if there was another solution besides using the absolute positioning method.

Here is what I used in the ATO>Header:

<div class="contact1"> Skype:AdventuretoAfrica </div>

Then this is my CSS:

.contact1 {height: 15px;
position: absolute;
margin-top: 5px;
margin-left: 830px;
font-size: 12px;
background: #BDBDBD;
padding-right:2px;
font-family:Verdana, Times, serif;
}

The issue is that when you reduce the width of the browser, the text floats outside of the header width, which I guess makes sense given the absolute definer. My main concern is that the text floats outside of the header when you view the website on an iPhone. Is this avoidable? Do I need to reduce the width of my header? Or is there another way to position the text on the right side of the page; I've tried margin-right: 0px, but that doesnt work for some reason. Thanks.

My website is tommikula.net.

did you put the
as the first thing in the 'Configure Header Area' option?

if not, try it there and change the positioning to 'relative'

Yes that was listed first in the 'Configure Header Area'.

When I switch it to relative, the text jumps up to another line above where I have the logo on the left placed. Take a look:

http://www.tommikula.net/

The CSS code now reads:
.contact1 {height: 15px;
position: relative;
margin-left: 800px;
margin-top: 0px;
font-size: 12px;
background: #BDBDBD;
padding-right:2px;
font-family:Verdana, Times, serif;
}

Thanks for any help you can provide.

try this, Instead of using the logo as a logo, use it as a header image, then you can use the 'Overlay header Image' options to put your text in and position it

Hmmm, still same problem; text runs outside the header when I decrease the width of the browser. Also runs over the header width on an iphone.

did you change the positioning to relative since anything in the 'Overlay Header Image' will be wrapped in the header image div?

Ok, I spent some more time with this and got it to work, thank you. It actually works when I use absolute position right 5px.

Now I can't seem to change the background color of the header?

because the area is 'clickable' use 'div.clickable {background-color: whatever:}' and set a z-index of at least 100 on contact1 and contact2

Ok, thank you. I wrapped a div around the contacts; but now the logo isnt showing up:

<div.clickable> <div class="contact1"> Skype:AdventuretoAfrica </div>
<div class="contact2"><a href="info@adventuretoafrica.com">Email:info@adven turetoAfrica.com</a> </div> </div.clickable>

Thanks for your help on this, I'm trying to learn as I go (obviously, haha)

Sorry, I wasn't clear. If you put your code into the 'overlay header image' option and you have set the option to make the header image clickable, it will be wrapped in a div with a class of 'clickable'

I think I'm missing something then; here is what I have in the CSS:

.clickable {
background-color: #D8D8D8;
}

And here is what I have in overlay header image (I removed the "clickable" class since its already there):

<div class="contact1"> Skype:AdventuretoAfrica </div>
<div class="contact2"><a href="info@adventuretoafrica.com">Email:info@adven turetoAfrica.com</a> </div>

OK, assuming ou are using Atahualpa 3.7.12

1) install the plugin 'wp-filemanager' then create a folder in the 'wp-content' folder called 'ata-images' then create a folder inside it called 'header'.

2) move your logo image to the 'wp-content/ata-images/header' folder

3) go to ato->New Image Locations and set
- Relative location of images?: to 'wp-content' and set
- Images Directory: to 'ata-images' then
- press SAVE

Your now ysing your logo as a header image and it should show up.