Moving logo on education pro child theme

[lilysimulado]

Hi everyone, I'm looking for a way to move the logo down a little bit and a little to the right closer to the navigation menu. Right now the logo is stuck on the top of navigation menu and I would love to being able to adjust down a little it so it stays on the same height as the text on the navigation menu and a little closer. Any advice on how to make that happen would be much appreciated.

Thanks you for your time.

Lily

http://theprepbook.com

[Christina]

Hi Lily. The logo itself is pretty tiny. Did you want it that small? If you upload a logo that's about twice that size, it should fill up the space and align itself appropriately.

[lilysimulado]

Hi Christina! Thanks for the response, it's just a temporary logo but for example if you would look at it now (updated logo) you would see how the logo is pushed at the top of the site.. do you know how I would move it down and a little to the right closer to the nav menu? Thank you for your help.

My Current Style css

Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
	background-color: #fff;
	border-top: 3px solid #e44a3c;
        box-shadow: 0 3px rgba(70, 70, 70, 0.05);
	min-height: 61px;
}

.education-pro-home .site-header {
	position: relative;
	top: auto !important;
	width: 100%;
	z-index: 499;
}

/* Title Area
--------------------------------------------- */

.title-area {
	background-color: #e44a3c;
	box-shadow: 0 0px rgba(70, 70, 70, 0.1);
	color: #fff;
	margin: 0 auto;
	padding: 20px;
	position: absolute;
	text-align: center;
	width: 300px;
}

.header-image .title-area {
	background-color: #fff !important;
	padding: 0;
}

.site-title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.site-header .site-title a,
.site-header .site-title a:hover {
	color: #fff;
}

.header-image .site-title > a {
	float: left;
	min-height: 58px;
	width: 100%;
}

.site-description {
	backface-visibility: hidden;
	font-size: 16px;
	line-height: 1.3;
}

.site-description,
.site-title {
	margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
	display: block;
	text-indent: -9999px;
}

[Christina]

Sure thing! You can add this code:

.site-title a {
margin: 3% 15%;
}

And adjust the numbers as you'd like.

[lilysimulado]

I added the code but the logo is still not moving. I tried changing the percentages and adding it to different sections but still no reaction..did I make a mistake somewhere? Thank you for your help.

/* Title Area
--------------------------------------------- */

.title-area {
	background-color: #e44a3c;
	box-shadow: 0 0px rgba(70, 70, 70, 0.1);
	color: #fff;
	margin: 0 auto;
	padding: 20px;
	position: absolute;
	text-align: center;
	width: 300px;
}

.header-image .title-area {
	background-color: #fff !important;
	padding: 0;
}

.site-title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.site-header .site-title a,
.site-header .site-title a:hover {
	color: #fff;
}

.header-image .site-title > a {
	float: left;
	min-height: 58px;
	width: 100%;
}

.site-title a {
margin: 10% 35%;
}

.site-description {
	backface-visibility: hidden;
	font-size: 16px;
	line-height: 1.3;
}

.site-description,
.site-title {
	margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
	display: block;
	text-indent: -9999px;
}

[lilysimulado]

Oh my bad! It worked! Just took a while to update. Thank you Christina!

[Author]

Posts