Header without the Header Sidebar

[Regan MacDonald]

I’m interested in adjusting the Photobug header so it just has the logo on the left, and my menu bottom-aligned on the right.

I’m not planning on making use of the Header Sidebar (demo uses twitter).

How can I move my menu to align to the bottom of the div, and still have it close to the logo when the page width is reduced in the browser.

I have adjusted the Margin-top in the “header.primary nav” area to push down the menu, but of course that margin is still in place when the menu is moved underneath the logo as the browser window with is reduced.

Any ideas on how I can achieve the menu at the bottom of the header (still in the right side div) without putting something in the Header sidebar?

Thanks.

[Bill Robbins]

Regan,

Thank you for your business first of all and great question. You can use a CSS Snippet like this one in the “Custom CSS” box of the theme options page to do that:

header.primary .menu {
	margin-top: 40px;
}

@media only screen and (max-width: 767px) {
	
		header.primary .menu {
			margin-top: 20px;
		}
	
}

The top part sets the menu height from the top when viewing in a normal size browser window. The bottom part changes the margin when the layout changes at 767 pixels wide (smaller than an iPad).

If you have any questions or trouble, let me know,
Bill

[Author]

Posts