Element Positioning

[Lara Marsh]

Hi –
I was playing with the position of my logo and in trying to get it to look good online as well as on mobile devices, I was playing with the positioning of other elements as well (wrap, content, sidebar, footer, navigation). At any rate, it’s a bit messed up still, but my messes also created something I like which is the logo floating on the top of the other elements. However, my positioning is still way off.

The site is http://essence.knowledgemeridian.com/
Here are my questions:

1. I would like the logo to look good on mobile devices and regular computers. As you can see, it has a large left side to it. What is the best way to do this? I think the way I have it is working, but I’m wondering what you think. As you can see on mobile devices, the left part is cut off but at least the bulk of the logo is showing up.

2. I like the logo floating on top of the home page slider as well as the content on interior pages, but it’s too far down. I’d like it to just barely overlap. How do I get the home page slider to move down? How do I get the content, sidebar, etc. to move down?

3. When I try to do #2 above, the footer still shows up at the top. So I feel like I’m adjusting the position of all the elements and afraid I’ll screw something up in trying to do that. Is there a way to make the positioning work on all the pages, regardless of the elements I use?

4. How do I position the navigation? It’s at the top right now, which I think I like, but I may want to move it back down to it’s default place below the header and above the content.

5. How do I make the background color of the navigation bar transparent? I think I may want just the words up there, no bar.

Thank you so much!
Lara

[Bill Robbins]

Lara,

Interesting idea. Let’s see what we can do.

The header of the site is made so that the logo and the navigation bar determine the height of that area. When the logo is set to have position: absolute, it removes that from that element from setting how tall the header is. That’s how the overlap is achieved (our Bottega theme is made to work that way).

You could use a CSS snippet like this:

#header {
	height: 160px;
}

#logo {
	top: 30px;
}

to keep the navigation at the top of the page and position the logo under it. You can change the spacing by adjusting the height of the #header and the top of the #logo.

The catch with that is it’s difficult to translate that to the mobile version. Since there are so many different screen sizes, it’s really difficult to position it this way on mobile. Your header needs to have a flexible height.

So to get around that, you could use this CSS snippet which has a media query in it. It’ll apply this CSS only when the browser size matches the conditions:

@media only screen and (max-width: 1024px) {
	
	#header {
		height: auto;
	}
	
	#logo {
		position: relative;
		top: auto;
		left: auto;
	}

}

You also might consider separating the tree and the text portion of your logo from the lines that are part of the background there. You could use the lines as the site background which would make fitting the logo easier too.

---

You can make the navigation bar transparent. Use this CSS snippet to do that:

#navigation {
	background-color: transparent;
	background-image: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

#navigation li {
	border-right: none;
}

#navigation .menu-item a:hover, 
#navigation .current-menu-item a,
#navigation .current-menu-item ul.sub-menu li a:hover,
#navigation .current-menu-parent ul.sub-menu li a:hover,
#navigation .current-menu-parent ul.sub-menu li.current-menu-item a,
#navigation .menu li ul {
	background-color: transparent;
	background-image: none;
}

---

If you want to leave the logo absolutely positioned and move the navigation bar back down below it, then you can use the snippet as a starting point.

#navigation {
	position: absolute;
	top: 140px;
}

You’ll have to set the height of the #header or it will overlap the content area too.

Hopefully that will help get things moving for you. If I can help, just let me know.

Thanks,
Bill

[Lara Marsh]

Bill –

Thank you so much! This was extremely helpful. You rock!

Lara

[Bill Robbins]

Anytime Lara. Have a great day.

[Author]

Posts