Primary navigation alignment

  • Resolved brentrambo

    (@brentrambo)


    1 year, 1 month ago

    I’m using WordPress 6.3.2 and the Twenty twenty-three theme.

    I can’t change the primary navigation’s alignment from the right side of the screen to the middle or left (on desktop).

    Is the navigation menu’s alignment based on the theme? Can it not be changed from the site editor? Do I need CSS to do this?

    Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)

  • I’m unsure what you mean by “middle” and “left”.

    The theme’s header has a parent flexbox container (Row block) containing two child items (Site Title block and Navigation block). This effectively gives the header two main columns: the site title on the left and the navigation on the right.

    So when you talk about “middle” and “left”, are you talking with respect to the overall header/page (ie 100% of the width)… or with respect to the Site Title on the left?

    If you want to align the Navigation to the left of the Site Title, select the navigation block and change its justification from the default “Justify items right” to “Justify items left”. See screenshots below:

    On the other hand, if you want to align the navigation to the left/middle of the entire width of the header, then you’ll first need to MOVE the navigation block above or below the Site Title block). That’s because you can’t align the navigation alone like this as long as there’s something else (the site title) taking some of the horizontal space.

    Once the navigation occupies 100% of the header width all by itself, you can then, once again, change its justification from the default “Justify items left” to “Justify items right”. You may also have to set its “Alignment” to Wide or Full width as desired.

    If you’re using the Twenty Twenty-Three theme in WordPress 6.3.2, the alignment of the primary navigation menu is likely predefined by the theme. Often, you can tweak this in the WordPress Customizer, but some themes don’t offer that level of flexibility. If you can’t find an option to align the menu in the Customizer, you’ll probably have to use custom CSS as a workaround. Go to the Customizer and find the “Additional CSS” section. Here, you can input CSS code to change the alignment to either center or left. For example, if your menu’s class is .menu-primary, you can use text-align: center; or text-align: left; to change its position. This way, you get control over how the menu appears on desktop views. Custom CSS gives you the flexibility that the theme’s default settings may not provide.

    @hafeezkk: Twenty Twenty-Three is a full-site editing theme (aka block theme).

    The Customizer is not even available at all when using an FSE theme, and these themes can be fully customized using the new Site Editor.

    And my screenshots above should be sufficient proof that no custom CSS is necessary to do what OP is asking for.

    Thread Starter brentrambo

    (@brentrambo)

    @gappiah thank you. I’m sure the full site editor has many benefits, but I find it very confusing. I didn’t realize changes I made to the page immediately after entering the editor included the navigation and affected all pages. I kept poking around the navigation area of the editor.

    Even after I found the alignment, it still wasn’t aligning left because the title block. I had to remove that block to make the actual navigation links align left. This doesn’t feel like an improvement.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Primary navigation alignment’ is closed to new replies.