BugWP
Submit a Bug
Back to Community
Home / Community / Theme → Vantage

How to Align and Customize Your Vantage Theme Menu: A Complete Guide

29 threads Sep 10, 2025 Theme → Vantage

Content

Customizing the main menu in the Vantage theme is a common request. Users often want to change its alignment, adjust sub-menus, or integrate it with plugins like WooCommerce. This guide compiles the most effective solutions from the community to help you achieve the perfect menu layout.

Common Menu Customization Requests

  • Centering the main menu
  • Right-aligning the main menu
  • Fixing sub-menu alignment issues
  • Adjusting sub-menu width for longer text
  • Changing the sidebar position

How to Center the Main Menu

To center your main navigation, add the following CSS code to your site. This is typically done in a child theme's style.css file or through a custom CSS plugin.

.main-navigation ul {
    text-align: center;
}
.main-navigation ul li {
    display: inline-block;
    float: none;
}

How to Right-Align the Main Menu

If you prefer your menu on the right side, use this CSS snippet instead:

.main-navigation ul {
    font-size: 0;
    text-align: right;
}
.main-navigation ul li {
    display: inline-block;
    float: none;
    font-size: 13px; /* Adjust to match your theme's font size */
}
.main-navigation ul ul li {
    text-align: left; /* Keeps sub-menu text left-aligned */
}

Fixing Sub-Menu Alignment and Width

After changing the main menu alignment, you might find your sub-menus inherit the same alignment, which can look odd. The CSS above includes a fix for this (text-align: left; for sub-menu items).

If your sub-menu text is longer than the background, you can adjust its width. The Vantage team provides official CSS snippets for these kinds of adjustments on their documentation site.

Changing the Sidebar Position

While not directly a menu change, many users want their sidebar layout to be consistent. To move the sidebar from the right to the left, you can navigate to Appearance > Customize > Theme Design > Sidebar in your WordPress dashboard. For more advanced conditional changes (e.g., only on WooCommerce pages), specific CSS targeting those page classes is required.

Important Notes Before You Begin

  • Use a Child Theme: Always make CSS modifications in a child theme. This prevents your changes from being overwritten when the Vantage theme is updated.
  • Use a Browser Inspector: Tools like Firebug or your browser's built-in developer tools are essential for identifying the correct CSS classes to override.
  • Clear Your Cache: After making changes, clear your browser and website cache to see the results immediately.

These solutions, gathered from community support threads, have successfully helped many Vantage users customize their navigation. For more complex layout changes, such as creating a horizontal sub-menu or adding a secondary menu, a significant amount of custom CSS or development may be necessary.

Related Support Threads Support