[John]

Where did you add the code in steps 1 and 2?

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Hi Jennifer,

It looks like you might have added the new widget area in the wrong place, or something along those lines, since your sidebar is now outside of your "content-sidebar-wrap" div container.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

You're welcome! Glad it worked.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

valmistaudu,

This should center your main navigation:

.nav-primary .genesis-nav-menu.menu-primary { text-align: center; }

For the current page menu item, change line 1054 from this

.genesis-nav-menu a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	background-color: #80c053;
	color: #80c053;
}

to this

.genesis-nav-menu a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu.menu-primary .current-menu-item a {
	background-color: #80c053;
	color: #fff;
}

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Hi boldplan,

I apologize for the delayed response - I've been incredibly busy lately.

If you've found a solution or hired someone to work it out for you, great! But if not and you'd like me to take a look at what needs to be done and shoot you a price, you could use the contact form on my website to get that started.

Otherwise, thanks for the new year's wishes, and I hope you have a good 2014 as well.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

genwrock,

Thanks for the mention!

boldplan,

Regarding the second one, it’s a tab button that does a nice job for what it does but it’s not an optimal solution from a styling standpoint.

The idea behind that styling technique was to use the button styling that's already being used in your website's CSS. You can change it up to look like anything you want with just a little CSS work.

although I prefer using CSS and not JS whenever I can avoid it.

I agree with you on using CSS and not JS whenever possible, and that's why I came up with that method.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Hi Jennifer,

After taking a quick look at your site I think the approach I would take is to separate "Anne B. Darring" and the two large green stars from the rest of the header image and make that the logo. Then set her photo and the tagline as the background image of the header. That should allow you to also have the contribute button in the header.

You'd have to adjust the CSS at your different media breakpoints so that the three elements would play well together, but that's what I would do.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

You're welcome!

This looks like a pretty good 2-video Firebug tutorial series: http://www.youtube.com/watch?v=tdIk2PztcL0 and http://www.youtube.com/watch?v=f38GEk27uj4

When you realize that the path you're on isn't the right or best path, the wise choice is to get off that path, no matter how much time you've been on it. And in my opinion, using a background image for a website logo is not the right or best path.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Because of the way you're handling that header image you're going to have to adjust your min-height for .title-area at each media query to make this work.

An easier way to do handle a logo is explained here: http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

For the gap between the site inner and the footer widgets, you have an empty paragraph tag in the text widget that contains your Commercial and Residential images/script.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Find page_archive.php in your Genesis parent theme folder, make a copy of that file and upload it to your child theme folder, edit the file as needed.

For example, the recent posts are displayed using the wp_get_archives() function with a limit of 100. If you remove &limit=100 it will display all your posts.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

You're welcome, Bonnie!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Mealtog,

When using this menu with a text site title, couldn't you reduce the size of that text to fit along with the menu button?

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

lbdesign,

That's part of the beauty of this mobile menu solution - the CSS can be reworked to fit any site and/or design preferences.

From what I've seen while using my phone to access the web, buttons or icons, usually in the upper right corner, are the norm for menus on mobile websites, and someone who uses their phone for surfing the web is going to be accustomed to that method. Screen real estate is a premium on mobile, and I would prefer not to take up space with a bar when a small button works just as well, and I can also shrink the logo and move it up into the other corner, conveniently out of the way.

If you use it and try the full-width bar approach, let me know so I can check it out.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Mealtog,

Here's a tutorial I wrote last month on how to do that: How to add a Soliloquy slider to a Genesis page template file

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

lbdesign,

Here's the result of that tutorial that Olivier mentioned on a Metro site: http://citychurch.bhwebworks.com/

Keep in mind that a visitor using a phone or small tablet isn't going to see the menu turn "from a bar to a button," since it's always a button on their device.

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Something like:

.entry-content p iframe { float: left; margin: 0 20px 20px; }

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

Chris,

I'd try

.site-header { padding: 0; }
.header-full-width.header-image .site-title a { min-height: 105px; }

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[John]

It doesn't look like the Balance theme includes a blog template, but you can copy one over from Genesis and then make your edits to that.

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Author]

Posts