Logo location

[Joseph Donofrio]

Hey there!

So I really liked the location of the menu bar in the center of the page- below the photos above the Donation bar- my question is how do I move my logo up so it doesn’t cover other parts of the site.

Thanks for the help!

[Bill Robbins]

Hello Joseph,

I hope you had a great weekend. I wanted to make sure that I understand what you’re going for here. Give this a shot:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   #navigation {
   	top: auto;
   	height: 58px;
   	bottom: -57px;
   	background-color: #000;
   }
   
   #header {
   	margin-bottom: 57px;
   }
   
   #header #text-logo {
   	top: 5px;
   }
   

3. Update your settings.

Is that what you're wanting to create or are you looking for something else.

Just let me know,
Bill

[Joseph Donofrio]

That’s what i am looking for- except when i switch to my logo – It over hangs over the donation bar. i am looking to center the logo in-between the menu bar as well as the slide show of pictures. take a look at my home page. choicess.org

[Bill Robbins]

Hello Joseph,

Let’s give this a try instead of the snippet above:

#navigation {
	top: auto;
	height: 58px;
	background-color: #000;
	bottom: -250px;
}

#header {
	margin-bottom: 250px;
}

#logo {
	top: -191px;
	width: 100%;
	text-align: center;
}

#nav-bar {
	width: 100%;
}

See how that works for you.

[Joseph Donofrio]

Awesome! Splits the Site into two! Thank you!

[Joseph Donofrio]

So the only question/problem left, is the mobile version, and different screen versions, it gets all jumbled. Is there a simple solution to that?

[Bill Robbins]

One option would be to wrap those styles in a media query so they only affect larger devices. That would look like this:

@media only screen and (min-width: 768px) and (max-width: 1023px) {

#navigation {
	top: auto;
	height: 58px;
	background-color: #000;
	bottom: -250px;
}

#header {
	margin-bottom: 250px;
}

#logo {
	top: -191px;
	width: 100%;
	text-align: center;
}

#nav-bar {
	width: 100%;
}

}

On the smaller devices, the layout would be like the default.

[Author]

Posts