A child theme is something that takes 3 minutes to set up. If you need something quicker than that, then you should hire someone to help you. (Though it will take you longer than 3 minutes to hire them.)
Set up a child theme with help from this page.
This will centre the logo. And this will centre the whole header block.
When setting up your style.css remember that it should at the very least contain this at the top:
/*
Theme Name: customizr-child
Template: customizr
*/
then you add your CSS.
And your functions.php should at the very least contain this at the top:
<?php
then you add your php code.
You can even download a child theme pre-customized for Customizr here. Upload it from the dashboard using Appearance > Themes > Add new > Upload.
Thank you. I was able to create a child theme and centered the logo and header. However, I was hoping that the logo would be centered within the header/splitting the menu items (like this http://blog.freepeople.com/). Is this possible?
Also, the menu is wrapping. I adjusted the margin and padding to no avail, any recommendations?
Hmm, nice effect, I agree.
I think it would take a fair bit of work to get there, probably defining another menu along the way. Not easy, I’m afraid.
Before hiring a programmer, one approach I would try would be to put my Home link in the middle of my menu, assign it a class (switch this on in the screen options) so that I could make it hide in the background. And then I’d try to superimpose my logo on top. But the devil is in the details, and it may not work at all this way.
I will try that, thank you. The remove word wrap code is not working. Any suggestions on other code? I tried,
/* Prevent word-wrap */
.navbar .nav li {
white-space: nowrap;
}
That stops individual menu items wrapping. To stop the whole menu wrapping you need to squash up the margins with the fonts first. Try changing the values in this:
/* Change menu padding: 2nd and 4th for horiz padding */
.navbar .nav > li > a {
padding: 5px 16px 5px 16px;
/* and change font in menu */
font-size: 16px;
text-shadow: none;
}
/* Change font size of first letters in menu */
.navbar .nav > li > a:first-letter {
font-size: 16px;
text-shadow: none;
}
@ndirstine
I had to change and test a few things in DevTools but I think I have what you want. The down side is that your logo don’t link.
.menu-primary-navigation-container {
background-image: url(http://www.ournestinthewest.com/wp-content/uploads/2013/12/logo-font-and-vane_final-cropped-small2.jpg); background-repeat: repeat-y; background-position: center;
height: 190px;
}
#menu-item-17 {
padding-right: 210px;
}
.navbar .nav {
float: left;
padding-top:70px;
}
If it doesn’t work send me a link & I will fine tune it.
Nice hack 🙂
However, you shouldn’t redefine row-fluid span9, because it will mess up the rest of the theme’s scaffolding. It needs more specificity to the header (not at my desk, so can’t check what that would be).
