Child Theme / Logo Navigation Menu

[LeanneKingwell]

Hi Bill,

Your child theme is working like a dream!
Thank you so much.

Couple of quick questions please:

1. How would I make the “arrow logo” (top left corner) link to home page?

2. Is is possible to make the Hero Buttons smaller and stop them from wrapping on mobile and smaller width windows?

3. Is it possible to unbold the main page headings?

4. What is the recommended width/height for the “Mobile Only background image” please?

Many Thanks… and have a great Friday 🙂

Leanne

[Bill Robbins]

Good Morning Melany,

I believe we can make these items work for you.

Make Arrow a Link

This will take a small edit to the child theme. Here’s how:

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose header.php
3. Locate this line:

   
   <li id="top-menu-item"><a href="#"></a>
   

   and change it to this:

   
   <li id="top-menu-item"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"></a>
   

4. Save your changes.

I believe that should make the arrow link back home now.

---

Smaller Buttons Mobile

Go back to the theme editor again and select the style.css file. Scroll down to the bottom and add this:

@media only screen and (max-width: 767px) {

	#hero-section a.button {
		padding: 6px 9px;
		font-size: 12px;
	}	

}

You can adjust the padding and font size of the buttons with that snippet. That should make them smaller. I can’t promise that they can become small enough to remain on one line on very narrow screens. Experiment with those values to find the right fit. Don’t forget to refresh the page after you make the change so that the browser picks up on the changed file.

---

Font Weight

That can be adjusted as well. Add this to the bottom of your style.css file too:

.page-title {
	font-weight: normal;
}

That should pick up both page and post titles and change them to the normal font weight.

---

Mobile Image Size

I would say this depends on the image to some degree. You’ll have much more cropping on mobile screens to due the extreme aspect ratio shifts between portrait/landscape and across devices. Because of that it’s really important to keep a lot of buffer space in your images between the main focus of the image and the border. Keep what’s important in the center.

With that said, you might want to go with an image that 1024px wide by 768px tall. That’s the same size as an iPad. Just make sure it works both portrait and landscape.

Have a great weekend,
Bill

[LeanneKingwell]

Thank you so much Bill.

Appreciate your help more than words can say 🙂

Hope you’re having a great day.

Leanne

[Bill Robbins]

Thanks Leanne 🙂

[Author]

Posts