Changing font color and responsiveness in header

Hi Rob,

Welcome to GP. Wordpress is definitely a bit confusing to start but it's not bad once you pass the learning curve.

If you only want those two sections for the header then hooks shouldn't be needed as you can just use Customizer and Wordpress options.

Try the following:
- Add the site title and tagline (location) in Customizer > Site Identity
- Customizer > Layout > Header > Header Width/Inner Header Width > Full
– Customizer > Layout > Header > Header Alignment > Left
- Add the "Check Availability" button and phone number as Text Widget in Dashboard > Appearance > Widgets > Header.

Let me know if this helps.

Thanks Leo,

Good name (it was my GGF's name...and my middle name :) I love it.

Story: the guy who sings the national anthem at Columbus Blue Jackets games (NHL hockey) is named Leo. When he is introduced before the game, he walks out on the ice and the entire crowd (sometimes as much as 19,000 people) in unison yells "LEO!!!". It's great!

Back to my issue, your solution works great on the desktop or tablet but it has resulted in two mobile issues...

1) The text box I added on the right side of the Header is on top and the title and tagline fall below it. Any way to reverse that?

2) I have the Header "stickied" to the top of my screen. That's an issue in mobile as it takes up more than half my screen. Is there a way to un-sticky it just for mobile? Also...because it is an extra large header, my first section image is actually part covered by the Header.

Thanks :) It's not my real name. I chose it when I moved to Canada.

1) This should help: https://docs.generatepress.com/article/header-widget/#showing-your-header-widget-below-other-header-elements-on-mobile

2) Wrap the .custom-fixed-header class in this:

@media (min-width: 768px) {
    .custom-fixed-header {
        /*CSS here*/
    }
}

Let me know.

If #1 above doesn't work, a link to your site would help see what the issue is.

Blue Jackets fan? Congrats on the awesome season so far :)

The WP site is http://www.littleriverbedandbreakfast.com/wp

Thanks Leo and Tom (btw cute baby :) Regarding the CBJ, yeah...been a lot of suffering the past fifteen years getting here. Its just one half season...they gotta show they can stay competitive for the entire season!

So both suggestions did the trick. I entered the CSS using the plugin Simple CSS...does that make sense?

But...damn there is always a "but"...but very close. When viewed in mobile, there is a lot of space between the mobile menu and the first section on the welcome page. Any way to tighten that up?

Secondly...and this on an aside...scroll down to the footer. The left section in my footer is our blog (I am in the process of migrating from blogger so its not up to date) and the right side is my logo and contact info. In mobile, my logo runs up the bottom of the blog. Suggestions?

Thanks again for everything!

-Rob

Yup all the CSS code we provide can go into Simple CSS.

Did you add the code already? Currently I still see the header widget on top of site title/tagline and header is still fixed on mobile.

Also don't see the gap below the mobile navigation.

As for the footer widget order, that's kind of how it's setup by default - first widget will show up from the left on desktop/tablet and on top in mobile. You could switch the widget order so logo/info will be on the left and posts will be on the right?

Could also consider uploading the logo in the header? (Customizer > Site Identity > Logo)

Hi Leo,

I had put the code into Simple CSS and saved it and it was working fine...but I just checked it and it had reverted back. Hmmm. I set it back up again so the Site Title and Site Description are on top with the Check Availability and Phone Number below it on mobile. The Header is also no longer sticky in mobile. All that's great.

Now you'll be able to see the space I am referring to between the menu in mobile and the image below it.

As for the issue with the Footer Bar, I solved that issue by taking the blog and logo/info out of the Footer Bar and put them into two separate Footer Widgets. Now the two shall never meet :)

So still trying to resolve the space between the mobile menu and the image below it.

Also trying to determine if I can use widgets in Sections. I like the look and idea of Sections but the Image Hover widget I am trying to use (short code) doesn't play as nicely in a single column and would be best in a series of side by side by side widgets.

Thanks for EVERYTHING!!! Really. Hopefully someday I can contribute back to the board as I become a GP Master :)

Looks like you have this code added in Simple CSS:

.custom-fixed-header + * {
    padding-top: 120px;
}

Remove that should get rid of most of the space.

Then add this CSS:

@media (max-width: 768px) {
    .separate-containers .inside-article {
        padding: 0px;
    }
    .entry-content, .separate-containers .site-main {
        margin: 0px;
    }
}

This should make the picture sits right against the navigation.

You should be able to use widgets in sections with a plugin like this: https://en-ca.wordpress.org/plugins/widget-shortcode/

Let me know.