Center Horizontal Nav Menu in Footer Widget

[jhmattern]

Hi. I’m having an alignment issue in the footer on a site I’m moving over to GP.

I was able to use the following to make the Footer 1 widget show my navigation links horizontally. This part works fine.

.footer-widgets .widget_nav_menu li {
    float: left;
    margin-right:10px; margin-left:10px; 
}

However, I’m not able to center that total menu above the centered Copyright notice. I can’t show the live site because it’s a staging site, but you can see a screenshot here:

https://allfreelancewriting.com/wp-content/uploads/2020/04/All-Freelance-Writing-Your-Secret-to-Freelance-Writing-Success.png

I’ve already dug through the past support answers and tried numerous fixes. Normally identifying and centering the div or class would be easy enough, but I can’t seem to pinpoint the right target here.

I’ve tried using text-align:center on .footer-widgets and just footer widget 1. If I don’t use the above styling to make the menu horizontal, then it centers fine. But when the menu is horizontal, nothing I do seems to center the menu items.

To get an idea of what I’m aiming for, the live site built on another theme is up at https://allfreelancewriting.com. I’m porting the design over to GeneratePress, and the only things I’m stuck on are footer-related — getting the links centered & adding the login/logout & “My Account” link for logged-in users (managed it fine in the secondary menu, but from checking past support threads it doesn’t look possible w/ the footer widget setup without registering a new menu).

Any ideas would be greatly appreciated.

Thanks!

[Leo]

Hi there,

Unfortunately screenshots don’t quite help with issues like this when we need to provide some custom CSS.

Can you duplicate the set up a live link so we can take a look?

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[jhmattern]

Because the staging site is a duplicate of an established live site, I can’t send it live even temporarily. I can give you access to a dev account so you can login and view the site though if there’s a private way I can send you that info.

[jhmattern]

I’m just going to mark this resolved temporarily though so you don’t spend more time looking into it. I’m going to try registering a new footer menu tomorrow anyway to see if it resolves my issue of needing login/logout and member dashboard links. And that might fix the centering issue since I won’t be using the footer widget anymore if that option works.

[Leo]

Sounds good.

Let us know when you need another look.

We will be here 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[jhmattern]

I was able to resolve this by registering a new footer menu. Then I called it in a hook tied to a custom hook named “generate_before_copyright.”

That took care of the centering issue and worked w/ the custom function adding the login/logout link.

Quick question about this though. When I tried using a hook previously, it didn’t work because this hook isn’t in the list to choose from. I only found it when I was digging into the footer.php file from the /inc/structure/ folder.

I’d assumed any hooks included in the theme files would be available from the dropdown list, but this one wasn’t. Is there a full list of accessible hooks somewhere that we can refer to when trying to set these things up?

Thanks!

[David]

Hi there,

there is a tonne of hooks in GP – some of the more niche ones are not included on the list. I personally use the Simply Show Hooks plugin if i can’t be bothered to dive into Github templates.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[jhmattern]

Good to know. Thanks so much!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts