Beautiful theme – moving and changing background image and navigation bar

[stephday]

Hi All,

I am trying to set up a website for the lab I work in and am having a few issues with the Beautiful theme: ISI Learn

1. The image I have is smaller than what the background image default code is sized to. I don't have a larger file of the image, so I would like to resize the space for the background image to better accommodate the image we want to use. The size of the image is 175x1150. I tried to stretch the height of my image to fit (which is what is has now), but it is obviously not the best option.

2. The navigation bar: I figured out how to hide the header, but now I want to center the navigation bar. I currently have it in the header widget so it is aligned to the right. We want it to be how it is here: http://sarahmae.com

3. We are also toying with moving the menu below the image as it is an option in the theme, but if we do end up doing that, how do I get rid of the gray background?

Really appreciate any help someone can give us!

http://isilearn.net

[rfmeier]

Helo,

#1. Are you looking to reduce the size of the background so the image will fit a little better? I tried a stab at it below:

.custom-background .site-header-banner {
    background-size: 1150px 175px;
}

.beautiful .site-header-banner {
	height: 175px;
	width: 1150px;
	margin: 0 auto;
}

It reduces the size of the image and centers it.

#2. I was able to center the navigation with Chrome tools. Try pasting this css below at the end of your style.css file.

.title-area {
    display: none;
}

.site-header .widget-area {
	float: none;
	text-align: center;
	width: 100%;
}

#3. It may be my monitor(s). but I cannot see the gray background. When I find it, I am sure it can be changed with css.

I hope this helps. Let me know.

---

Ryan Meier – Twitter

[ChrisD]

Hello!

I'm really struggling with the same issue - centering the navigation. The code pasted at the bottom of the CSS does not change the site, but pasted under the Title Area section it turns the menu into a bulleted list. Is there another section where I could try to paste this code? Thanks!

http://www.buffydekmarblog.com/photographers

Chris

[rfmeier]

Chris,

The code above has nothing to do with the navigation menus. To center the navigation you will need to add a rule to the navigation menu in your style.css file.

Around line ~953 add text-align: center; to get the following;

/*
Site Navigation
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {
	clear: both;
	color: #666;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	width: 100%;
	text-align: center;
}

Here is the result I was able to get https://s3.amazonaws.com/uploads.hipchat.com/61944/453094/jxwoEmZoxZkIc2H/centered-navigation.png

---

Ryan Meier – Twitter

[ChrisD]

@rfmeier- thank you for the quick reply and spot on diagnosis. Many thanks!

[rfmeier]

Glad I could help. Good luck.

---

Ryan Meier – Twitter

[Author]

Posts