[Resolved] Making The Nav Menu Center Aligned

[Jodie]

Hi folks,

I’m trying to get the text in my nav menu in the header to center align. I’ve tried using the text-align property but it doesn’t seem to work.

Thanks for your help!

Cheers Jodie

[Fernando]

Hi Jodie,

Here is a code you may try:

@media (min-width: 769px) {
        ul#menu-home {
        display: flex;
        justify-content: center;
    }
}

Adding this through Appearance > Customize > Additional CSS should work.

Kindly let us know how it goes. 🙂

[Jodie]

Hi Fernando,

That worked, thank you! Can you tell me how I can make the gap between elements in the Gutenberg editor closer together? I’ve tried margin-top: -10 but that doesn’t seem to work.

Cheers Jodie

[Fernando]

Might I suggest using Blocks from lightweight and free GenerateBlocks plugin?

I believe you’re currently using the WordPress core Heading Block which has default spacing. It can be edited but you’ll need custom CSS.

For instance, you may try adding this CSS in Appearance > Customize > Additional CSS:

.entry-content > * {
    margin-top: 0;
    margin-bottom: 0px;
}

Kindly modify 0px to your preferred value. Then again, you would need more custom CSS if you want more specific modifications to selected Blocks.

On the contrary, which is what we would highly recommend, a Headline Block from GenerateBlocks has settings built in that allow you to modify multiple things like spacing.

See: https://share.getcloudapp.com/5zuLYB8N

Also see: https://docs.generateblocks.com/article/headline-overview/

Also see: https://share.getcloudapp.com/12ug4AB5

Hope this clarifies. 🙂

[Jodie]

Hi Fernando,

I’d like to avoid extra plugins if possible. That code you gave me worked, thank you!

However there’s not enough spacing between the last element on the homepage and the footer. How do I add some spacing there without messing up the decrease in spacing in all the other elements?

Thanks!

Cheers Jodie

[Fernando]

You’re welcome Jodie!

You can try adding another WordPress Spacer Block as such: https://share.getcloudapp.com/GGulWQbG

Kindly let us know how it goes. 🙂

[Jodie]

Hi Fernando,

That worked, thank you!

However there’s lots of space underneath the nav menu where the H1 usually is. I’ve got it hidden.

How do I decrease the spacing between those elements?

Cheers Jodie

[David]

Hi there,

why not use the Disable Elemento remove the Content Title:

https://docs.generatepress.com/article/disable-elements-overview/

That will hide the title and fix the spacing issue.

[Jodie]

Hi David,

That worked, thank you so much!

Since I made the nav menu items center aligned with the code Fernando provided, the background and hover colors don’t align with the position of the text. Is there any way to fix this please?

Also, the code for decreasing space between the elements on the homepage work, however it applies to the rest of the site, which I don’t want. Is there a way to just make that code apply to the homepage and nothing else? Thanks!

Cheers Jodie

[Leo]

Since I made the nav menu items center aligned with the code Fernando provided, the background and hover colors don’t align with the position of the text. Is there any way to fix this please?

I might be missing something here but you shouldn’t need CSS to center the menu items.

Can you try setting the navigation alignment to center first?
https://docs.generatepress.com/article/navigation-layout/#navigation-alignment

[Jodie]

Hi,

Thanks Leo! I used your suggestion instead and it works well.

The code for decreasing space between the elements on the homepage work, however it applies to the rest of the site, which I don’t want. Is there a way to just make that code apply to the homepage and nothing else? Thanks!

[David]

Remove this CSS – its just going to cause you a lot of headaches:

.entry-content > * {
    margin-top: -0px;
    margin-bottom: -45px;
}

For your home page, i would recommend using the GenerateBlocks plugin. For each of the different sections use a Container Block – you have 100% control over its styles and by default it has 0 margins, so no annoying gaps 🙂

Is that an option ?

[Jodie]

Hi David,

I removed the CSS and used the GenerateBlocks plugin to redo the homepage, it works nicely, thank you!

I have an element at the top of my website that isn’t mobile responisve. Can you create an element using GenerateBlocks and hide it on desktop?

Thanks!

Cheers Jodie

[Leo]

Have we resolved the Nav menu center issue in the original topic?

If so can you open a new topic for the separate question?

Thanks!

[Author]

Posts