[Resolved] How to make header widgets display horizontally, not vertically

[Kamela]

Hi Tom,

I’m trying to create a header like this https://writermelissab.com/ — with a photo, my logo, and contact info in 3 widgets across the top, and I can’t figure it out.

Is this possible? The widgets all stack vertically on the right-hand side of the header.

Thanks,
Kammy

[Kamela]

Any ideas on this?

[Tom]

Hi Kammy,

This is probably the easiest way to do that: https://docs.generatepress.com/article/split-header-three-sections/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kamela]

Thanks, Tom. I am confused by the directions. If I create a hook element there is no place to choose a header (just above header, below header, etc. to place code). There is no area for additional Css and there is no “Disable Site Header” checkbox.

Do I have an old version of Premium Press I need to update or something?

Best,
Kammy

[Kamela]

So I created a header element, put the HTML in the content section and put the CSS in the “classes” section — that was the only place I could think it might go.

All of the sections stack up vertically on the left side of the screen instead of horizontally across.

Where to now?

[Tom]

Is there anywhere I can see this? The URL you shared doesn’t seem to have the same kind of header.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kamela]

My site is https://kammythurman.com. I haven’t got it up on my site, yet, b/c I can’t figure out how. I want the header to look like https://writermelissab.com/, with the 3 sections so I can add my photo, logo and contact info., as she has. It would appear on all pages.

[Tom]

Is there any way you can add it to a test page? You can use the Display Rules in the Element to display it only on the test page. I need to see it live to know why it isn’t working.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kamela]

Here it is — http://kammythurman.com/sectioned-header-test-for-tom/

Thanks!

[Tom]

It looks like you haven’t added the necessary CSS provided in step four: https://docs.generatepress.com/article/split-header-three-sections/

Also, instead of adding it in a “Header” Element, use the “Hook” Element. Then you can set the hook to “header”.

Then you’ll need to activate the header, right now you’re using the Navigation as Header option: https://docs.generatepress.com/article/navigation-as-a-header/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kamela]

OK, dumb question — where do I add the CSS?

[Kamela]

Figured the CSS, and now have the 3 sections. Tried adding widget shortcodes to the html in the hook, but it just shows the shortcode, not the image that’s supposed to load. I’ve left it up so you can see. https://kammythurman.com.

[Tom]

Did you check the “Execute Shortcodes” option in your hook options?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts