Center header for Spun Theme

  • pamelawasabi · Member ·

    Hello there,

    Was wondering if I can insert and center this image to the header of my blog. I would remove the type and heart logo now visible.

    The image for the header is:
    https://pamelawasabi.files.wordpress.com/2014/06/house-of-lotus-banner-pamelawasabi.jpg

    Thank you in advance
    ;)

    -p

    The blog I need help with is: (visible only to logged in users)

  • designsimply · Member ·

    What happens if you insert the image using the Appearance > Header page? Does that not work out?

    Or were you trying to do something different like put it at the center top instead of at the left above the site title?

  • designsimply · Member ·

    Here is one possible way to add a top centered header image to the Spun theme:

    .site-header {
	background: url(https://pamelawasabi.files.wordpress.com/2014/06/house-of-lotus-banner-pamelawasabi.jpg) top center no-repeat;
	padding-top: 290px;
}
  • designsimply · Member ·

    Here’s another possible example:

    .site-header {
	padding-top: 290px;
}
.header-wrapper > a {
	background: url(https://pamelawasabi.files.wordpress.com/2014/06/house-of-lotus-banner-pamelawasabi.jpg) top center no-repeat;
	position: absolute;
	top: 0;
	width: 600px;
	height: 290px;
}
.header-wrapper > a img {
	display: none;
}
  • pamelawasabi · Member ·

    Hi!

    Thank you so much for getting back to me.
    The first code worked great!

    What happened before would be that the header will get scaled down and aligned to the left.

    Now I need to center the menu bar.

    Thank you for your help ;)

  • pamelawasabi · Member ·

    Sorry to bother you again. I have one more request about the header.
    Can it have the link back to the home page again pls?
    So, if people click on the header and they are in a post, it will direct them back to the home page.

    let me know if that’s not too much to ask.

    thank you!

  • designsimply · Member ·

    To expand and then center the menu in the Spun theme, try adding this to your Appearance > Customize > CSS editor:

    .main-navigation {
	width: 100%;
}

.main-navigation ul {
	text-align: center;
}
  • designsimply · Member ·

    By the way, I love the logo and what you’re doing with the Spun theme! Looks great!

  • pamelawasabi · Member ·

    wow. you are genius!
    thank you so much for helping me out!

    and thank you on your feedback about my logo.
    I haven’t shown it yet to anyone. :)

  • noelkalti · Member ·

    Hi Pamela and Designsimply!
    I’m trying to figure out where exactly I should embed this codes for making the logo in the center.
    Is it already written there and I should change only from left to center?

    Pamela, you did such a great job in your website, I just forward it to my vegan cousin :)

    I would highly appreciate if you can kindly explain also;
    1. How did you canceled the focus hover at the logo?
    2. how did you change the color and width of the “+”?
    3. whats the name of the social bottom plugin?

    Thank you so much :)
    this is my website
    http://www.yafa-maximov.co.il

  • designsimply · Member ·

    I’m trying to figure out where exactly I should embed this codes for making the logo in the center.

    You have a different setup. In the CSS examples above, the logo is added manually with CSS rules. In your case, you already have a logo in place and just need to center it. The Spun theme is designed with the space for the header at 45% width. You can undo that and also get rid of the float rules and center the logo you have in place on your header by adjusting the margin like this:

    .header-wrapper {
	width: 100%;
}
#masthead img {
	display: block;
	float: none;
	margin: 0 auto;
}

    1. How did you canceled the focus hover at the logo?

    Because she added the logo a different way compared to you, she didn’t have to cancel the focus hover.

    In your case, if you wanted to remove the opacity at the beginning so that the opacity doesn’t change on hover, you could do this:

    .site-header {
	opacity: 1;
}

    Or if you wanted the logo to keep the faded look, you could just match the original opacity to the hover and focus states like this:

    .site-header:hover,
.site-header:focus {
	opacity: 0.3;
}

    2. how did you change the color and width of the “+”?

    The “+” is completely hidden on http://pamelawasabi.com/ and the “Older posts” link that you see is part of a feature that comes with WordPress.com and it is not part of the theme itself.

    3. whats the name of the social bottom plugin?

    The social icons at the bottom right on http://pamelawasabi.com/ were added using the Publicize feature on WordPress.com. Your site http://www.yafa-maximov.co.il/ is using WordPress but it is not hosted here at WordPress.com. However, you can get the same feature by adding the Jetpack plugin and activating the Publicize module. After that, follow the instructions at http://theme.wordpress.com/themes/spun/ under the “Connect” heading.

    All of the advice in this reply is for WordPress.org because your blog is a self-hosted WordPress.org setup and not a WordPress.com setup. If you would like to learn more about the differences, please see http://en.support.wordpress.com/com-vs-org/

    To get further help or answers to questions about a self-hosted setup, you should post at http://wordpress.org/support/theme/spun in the future.

  • alprauschswitzerland · Member ·

    Hei Designsimply,
    I have a similar Problem. The Header Image Masthead is not centered in my mobile-version. works fine otherwise tho, i can’t figure out why.
    Can you please give me a tip?

    https://alprauschswitzerland.wordpress.com/

    Thanks much

  • designsimply · Member ·

    @alprauschswitzerland, you have a mistake in your custom CSS. This line looks like a mistake and should be removed:

    (index)media="all"

    Try taking that out, and check to see if that fixes the problem. I tested it on my site with the Able theme and your CSS and removing that line fixed the problem for me. If you’re still having trouble after that, please start a separate help request since your question is about a site using the Able theme and the other questions in this thread are using the Spun theme.

  • alprauschswitzerland · Member ·

    That worked really well, thanks so much!

  • The topic ‘Center header for Spun Theme’ is closed to new replies.