[Resolved] Making The Nav Menu Center Aligned

Home Forums Support [Resolved] Making The Nav Menu Center Aligned

Home Forums Support Making The Nav Menu Center Aligned

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2171911
    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

    #2171920
    Fernando
    Customer Support

    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. 🙂

    #2174170
    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

    #2174193
    Fernando
    Customer Support

    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. 🙂

    #2174209
    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

    #2174219
    Fernando
    Customer Support

    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. 🙂

    #2175140
    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

    #2175345
    David
    Staff
    Customer Support

    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.

    #2176010
    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

    #2176093
    Leo
    Staff
    Customer Support

    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

    #2176126
    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!

    #2176235
    David
    Staff
    Customer Support

    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 ?

    #2176869
    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

    #2176898
    Leo
    Staff
    Customer Support

    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!

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.