[Resolved] Left-aligned logo in right aligned menubar

[Vera]

I’ve been trying to figure out how to get a small logo that is left aligned in my secondary menu which is right aligned (gray bar at the top). I haven’t been able to find any settings for this in GP and I’m having no luck coming up with the correct CSS. Is it even possible?

[Leo]

Hi there,

I’m not seeing a logo in the secondary navigation currently.

How are you adding it?

[Vera]

I have not been able to add it — I don’t know how. I tried to see if I could display the site logo with CSS but no luck.

If you could tell me the classes I need to use or how to find them, I may have better luck with my experimenting. Normally I use my browser’s code inspector to find these, but it didn’t help in this case.

[Leo]

Try the inside_secondary_navigation hook with a hook element:
https://docs.generatepress.com/article/hooks-visual-guide/
https://docs.generatepress.com/article/hooks-element-overview/

[Vera]

Can you also tell me the classes and tags I would use for displaying a site logo? I’m assuming I would style a div’s background enclosed in one or more other divs, but which ones?

I’m afraid I can’t make head or tails of hooks. I tried to figure it out when I first got GP a couple years ago and it’s no clearer now. It looks like it involves PHP and I only know enough of that to modify existing scripts (with direction). Since this is not a critical element, if I can’t accomplish it with CSS, I may have to wait and deal with it another time — if at all.

[David]

Hi there,

Hooks are fairly straight forward – try this:

1. Appearance > GeneratePress and make sure the Elements module is enabled.
2. Appearance > Elements –> New -> Hook.
3. Add your logo image HTML eg.

<img src="url_to_your_image/image.jpg" class="secondary-nav-logo" width=50 height=50 />

4. From the Hook List select:
inside_secondary_navigation

5. Display Rules = set to Entire Site ( or wherever ).

Then just some CSS is required to position it. See if how the above goes and we can assist with the CSS if all ok.

[Vera]

Thank you David! That did it — and my css worked on the first attempt, too. And no php — whew!

Maybe some actual examples in the documentation and before and after effects of using it (including in the video) would spell it out for non-coders like me. Or a resource library of modifiable starter hooks???

[David]

Glad to hear that – yeah i think we could do with a few examples 🙂

[Author]

Posts