[Resolved] Off campus panel align left

[William]

Hello

Possible to make the off campus panel navigation links align left and have less space in between them?

Right now they’re centered and there is quite a lot of space between the different categories.

Thanks in advance.

Website is thebullfighter.com

[Fernando]

Hi William,

To add or reduce vertical spacing in Menu Items for the Off canvas panel, can you try altering the Menu Item Height in Appearance > Customize > Layout > Off Canvas Panel?: https://share.getcloudapp.com/lluEzzBJ

Then, to make the menu items left aligned, you’ll need to go to Appearance > Customize > Additional CSS and make this code text-align: left !important; instead: https://share.getcloudapp.com/lluEzwQG

To align the X button left as well, you’ll need to add a CSS like this in Additional CSS:

.inside-navigation.grid-container.grid-parent {
    align-items: flex-start;
}

Hope this helps! Kindly let us know how it goes. 🙂

[William]

Fantastic Fernando! Thank you so much for the quick help.

[Fernando]

You’re welcome William! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

[William]

Hey Fernando, is it possible to advise me on how to align the navigation items left on the tablet view? Currently, they’re still centered.

Thank you!

[Ying]

Hi William,

As the topic is marked resolved, your site info is gone.

Can you link us to your site again?

[William]

Hi Ying it’s thebullfighter.com

Trying to get the primary navigation links in the off campus panel to align left on tablet view. Currently aligned center.

Thank you.

[Leo]

Try this:

.slideout-navigation.do-overlay .inside-navigation {
    text-align: left;
}

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

[William]

Hi Leo –

Thank you for trying. The off campus panel on tablet is still showing centered with this CSS.

[Fernando]

Hi William,

Here is a CSS you may try adding:

#generate-slideout-menu.do-overlay .slideout-menu li {
    text-align: left;
}

Moreover, to move the X button to the left as well, here is another CSS code:

nav#generate-slideout-menu .inside-navigation button.slideout-exit.has-svg-icon {
    position: static;
}

Kindly let us know how it goes. 🙂

[William]

Worked like a charm, Fernando! Thank you.

Kudos to the entire GeneratePress team. Ying, Fernando, Leo, David, anyone I’m missing. You are all AMAZING.

[Fernando]

On behalf of the team, you’re welcome William! We’re glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

[Author]

Posts