Back to Community
Home / Community / Theme → Vantage

How to Adjust Logo and Menu Positioning in the Vantage Theme

54 threads Sep 16, 2025 Theme → Vantage

Content

Customizing the header layout is a common request for users of the Vantage theme. Many site owners want to adjust their logo's placement, center their navigation menu, or have both the logo and menu stick to the top of the page when scrolling. This guide compiles the most effective solutions based on community discussions.

Common Logo and Menu Positioning Issues

Based on numerous support threads, users frequently want to:

  • Move the logo to the left or right.
  • Center the logo above the menu.
  • Place the logo inside the navigation menu bar.
  • Center the entire navigation menu.
  • Make both the logo and menu bar stick to the top on scroll.

Solutions and Code Snippets

1. Centering the Logo

To center a logo that is above the menu, you can use the following CSS. This code works by turning the logo container into a block element and using auto margins to center it.

.site-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Add this code to your Custom CSS area (in the WordPress Customizer or a plugin like Simple Custom CSS).

2. Centering the Navigation Menu

Centering the menu is a more complex task and often requires a specific CSS technique. The following code has been reported to work for many users.

.main-navigation .menu {
    display: table;
    margin: auto;
}

For some layouts, a more detailed approach might be necessary:

.menu-primary-container {
float: right;
position: relative;
left: -50%;
text-align: left;
}

#menu-primary {
list-style: none;
position: relative;
left: 50%;
}

#menu-primary li {
float: left;
position: relative;
}

3. Using the "Logo in Menu" Layout

Vantage includes a built-in "Logo in Menu" masthead layout option in the Customizer. However, a known issue is that it constrains the logo's height, often making it appear too small.

To fix this and allow your logo to use its full size, add this CSS:

header#masthead.masthead-logo-in-menu .logo > img {
max-height: none !important;
}

4. Making the Header and Menu Stick Together

A limitation of the Vantage theme is that only the navigation bar can be set to stick to the top on scroll; the masthead (which typically contains the logo) cannot be made sticky by default.

While custom code can make both elements sticky, it is important to test this thoroughly on mobile devices, as it can cause content to be blocked.

Important Notes Before You Begin

  • Use a Child Theme: Always add custom CSS to a child theme or a custom CSS plugin. This prevents your changes from being overwritten when the theme updates.
  • Clear Your Cache: After making changes, clear your browser and website cache to see the results immediately.
  • Test Responsiveness: Any layout change can affect how your site looks on mobile devices. Always check your site on different screen sizes.

These solutions are compiled from successful community support threads. If one method does not work for your specific setup, trying an alternative snippet is often the best approach.

Related Support Threads Support