adjust header so right hand widget area does not impinger on left side title are

[worldviewpr]

I have been futzing with my title area in header and cannot figure out to solve issue where if any widget appears in the right title widget area, it forces the left hand title area from one line to two.

the left hand header area is 380px and right hand is 725.

I have tried changing the sizes of these areas

I have tried changing the font px size of the title (don't understand px to rem but usually it is same but with decimal (48px 4.8 rem)

Please advise if there is a way of reducing the right side container to like 234px or google half banner size to allow title to remain one line

http://halfwaytoconcord.com

[cwalsh]

I'm not sure if this is what you mean but there is padding on the .title-area. If you change it to 0 the top of the title text will line up with the top of Translate on the right.

.title-area {
float: left;
padding-top: 30px;
padding-top: 3rem;
width: 380px;
}

---

Need website customization services or other help? Caley @ PixelPerfect Design Studio | Connect with me on Twitter: @pixelsperfect | Like me on Facebook: https://www.facebook.com/PixelPerfectDesignStudio

[worldviewpr]

see relevant default code below. In your response it looks at least the header image are is set to '0' but not sure that is what we are talking about.

in title area below what line is it exactly that I would change to '0'? I thought padding would be from top of page. Thanks for any clarification

title-area {
	float: left;
	padding-top: 30px;
	padding-top: 3rem;
	width: 380px;
}

.header-image .title-area {
	padding: 0;
}

.site-title {
	font-family: 'Raleway', sans-serif;
	font-size: 48px;
	font-size: 4.8rem;
	line-height: 1;
	margin-bottom: 0;
}

.site-title a,
.site-title a:hover {
	color: #222;
	font-weight: 900;
}

.site-description {
	display: block;
	height: 0;
	margin-bottom: 0;
	text-indent: -9999px;
}

/* Full width header, no widgets 
----------------------------------------*/

.header-full-width .title-area,
.header-full-width .site-title {
	width: 100%;
}

.header-image .site-description,
.header-image .site-title a {
	display: block;
	height: 0;
	margin-bottom: 0;
	text-indent: -9999px;
}

/* Logo, hide text */

.header-image .site-header .wrap {
	padding: 0;
}

.header-image .site-title a {
	background-position: center !important;
	background-size: contain !important;
	float: left;
	display: block;
	min-height: 90px;
	text-indent: -9999px;
	width: 100%;
}

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
	float: right;
	text-align: right;
	width: 725px;
}

.header-image .site-header .title-area,
.header-image .site-header .widget-area {
	padding: 40px 0;
	padding: 4rem 0;
}

.site-header .widget-area p {
	margin-bottom: 0;
}

[Author]

Posts