Header Script layout assistance required

[malycom]

Hi

What pieces of information in the Header Script in order to place a logo 32 pixels from the left and then also add contact details at the same height but on the right, again, 32 pixels in. It's in the lifestye pro theme which is responsive so would like the details to work in this way as well.

THis is what I attempted to set up in the Style sheet for the logo. This is just bits of copied from other areas of the style sheet as I don't really know what I'm doing.

.test-logo {
background-color: #fff;
max-width: 300px;
overflow: hidden;
margin-bottom: 0;
}

I have no idea how to set up the next part which I require to be on the right hand side at the same height.

Thanks

[Stefsull]

Do you have a link to the page so we can see the code?

[malycom]

Hi

This is all just dummy text etc, but if you see the log at the top, ideally I want that to be lined up with the rest of the site and the email underneath to be on the other side.

Also, I would like to have that shaded background to be white. Can't seem to find that in the Style Sheet.

http://maldavidson.com/lutea/

Thanks for looking.

[Stefsull]

You had the right idea... you need to get rid of the max-width: 300 since that's limiting the area that div can cover. So this rule:

.lutea-logo {
	background-color: #fff;
	/* max-width: 300px;  Leave this out */
	overflow: hidden;
	padding: 10px 32px;
	padding: 1rem 3.2rem; /* adjust these values as needed */
	margin-bottom: 0;
}

.lutea-contact-details {
	/*margin-right: 32px; You don't need this with the padding on the parent */
	float:right;
        padding-top: 10px; /* Adust this to visually balance with the logo on the left if you like */
}
/* add this */
.lutea-logo img {
     float: left;
}

There's some mangled code in your contact link... it's missing a final " after the class - it needs to look like this:

<div class="lutea-contact-details"><a href="mailto:[email protected]">[email protected]</div>

As to the shaded background, I'm guessing you mean the textured overall background? If so, that seems to be written by a plugin. Do you have something called "custom background" that you can turn off? The CSS is:

body.custom-background {
background-image: url('http://maldavidson.com/lutea/wp-content/themes/lifestyle-pro/images/bg.png');
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}

It's being written into the bottom of your page (which is why I suspect a plugin). If you can turn that off, you'll still want to change your body background to: background-color: #FFF;

[malycom]

Thanks so much for your help - What you have suggested is working but now the first link on the menu has gone a bit weird. I am looking at this though FireFox and the Home link looks like it is being hovered on and two sub menus are apearing above, even though there are no sub menus on the home button.

I removed the home buttong from the menu but then the About button started doing the same so I have put the home button back.

Any ideas?

Thank you

[Stefsull]

However you're adding the mailto: link (functions.php??) It's adding it inside every element - not just the header/logo where you want it.

Check this out: http://screencast.com/t/LxgvOHpL

You've also got some things that should be in the head of your page that are down a bit and wrapped in a mailto: link. Not sure how that happened, but it's what's affecting your menu. HTH 🙂

[malycom]

Thank you - I think I can see what I did wrong.

Many thanks for your help. I really appreciate it.

[Author]

Posts