Site logo

Archived topic

Off campus panel align left

11 replies · Started by William on March 14, 2022

Viewing posts 1–12 of 12

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

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. :)

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

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

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!

Hi William,

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

Can you link us to your site again?

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.

Try this:

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

Hi Leo -

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

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. :)

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.

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. :)

This archived topic is closed to new replies.