Adjust Header Area With Split Menu?

Hi there,

You can try:

1. Setting the navigation location to float right: https://docs.generatepress.com/article/navigation-location/
2. Add the data to show above the navigation in the header widget (Appearance > Widgets).

It will likely need some custom CSS once you do that - let us know :)

Ok. I got it to float right. But I can't figure how to make the image go all the way to the logo.

And I can't get the logo to be parallel with the menu.

I can't get the image on the right to be longer. I'll need the long image with Pinellas/Pasco, etc to go all the way to the left side near the logo.

And then I'll need the logo to show up to the left of the menu.

So it'll look like two columns. First column has the logo. The second column has two rows with the Pinellas/Paso with phone #s, and the next row the menu.

Try adding this:

.header-widget {
    max-width: none;
}

@media (min-width: 769px) {
    .site-logo {
        float: left;
    }
}

Make sure the navigation is set to float right though - right now it's after the header.

Worked great!

Now the only other thing I need to know how to do is how to change the "Home" menu link into a house image. How would I do that?

You could use a plugin like this: https://wordpress.org/plugins/menu-icons/

Using an SVG would be faster than using a font icon.

I was hoping to avoid another plug in. There's no easy way to do it with CSS or adding something in the PHP?

Hi there,

the Navigation labels in the menu editor supports HTML and inline SVGs.
If you have a SVG icon you can open it in your text editor/IDE or use this site to grab the <svg> element of the code and paste it into the label field.

Ok, great. When you mentioned I could use this site to grab the <svg>, what site and web page was that exactly?

Font Awesome has tons of SVGs you can download for free :)