Header Alignment

Hi Kristen

Thanks for your support. Sorry to hear you’ve run into a problem.

You may have noticed the menu hover style, it places a blue underline at the bottom of the header. In order to do that, Ultra sets a line height for the menu equal to the height of the header. The downside is that this style of menu doesn’t handle overlap well. Overlap is what’s happening now. If your menu had fewer items the problem would resolve.

By default the logo/site title area is allow 35% of the header and the menu the rest. Depending on your logo/site title, we can adjust the allowed space for each.

Install Simple Custom CSS: https://wordpress.org/plugins/simple-custom-css/. Go to Appearance > Custom CSS and insert:

/* Site Branding */

.site-header .site-branding-container {
  max-width: 28%;
}

/* Main Navigation */

.main-navigation {
  max-width: 72%;
}

Given the menu items you have now, this adjustment allows just enough space for the menu to fit on one line.

Let me know how it goes.

Hi Ric

Thanks for your feedback.

It’s a bit of a balancing act with this layout to provide enough space for most site titles and enough space for a normal length menu. For anyone reading, if you do adjust the max-width of the site branding area and or menu, you need to adjust them both. Ideally they should add up to 100%.

I re-looked at these widths for the last update and provided extra responsive support. I think I’ve got it as balanced as possible. But will re-look at things again after the next update.

I responded to your other thread now regarding the footer/boxed. Thanks 🙂

Super 🙂 Glad that helped.

If anything else comes up, please let me know.

All the best with your site.

Hi Paris

Great to have you with us. Thanks for your support 🙂

Are you looking to center the menu in the space between the logo and where the menu is now?

Think I got it. Add the following to Appearance > Custom CSS if you’re using Simple Custom CSS plugin or Appearance > Edit CSS if you’re using Jetpack Custom CSS OR to your child theme style.css file. Remember not to edit any theme files directly via Appearance > Editor without a child theme as theme updates will overwrite any changes there.

/* Center the Main Menu */

.main-navigation:not(.toggled) {
  	float: left;
  	max-width: none;
	text-align: center;
	width: 91%;
}

@media screen and (min-width: 1024px) {
  .main-navigation:not(.toggled) > div {
      display: inline-block;
      float: none;
      vertical-align: top;
  }
}

@media screen and (min-width: 1024px) {
  .main-navigation:not(.toggled) .menu-search {
      display: inline-block;
  }
}

Because it’s not a theme setting we need to create this manually. So two values that need observing are:

91%, adjust that value until your menu and logo/title are on one line. Ideally adjust it until they drop onto two lines and then bring it one percentage back.

1024 make this value the same as whatever you have at Appearance > Theme Settings > Navigation > Responsive Menu Collapse.

Hope that helps.

Super, really glad that helped.

WordPress now have a warning at Appearance > Editor but it’s not nearly enough. All themes completely overwrite their own folder when updating from one version to the next. What you need to do now is move your changes.

1. Download the original: https://downloads.wordpress.org/theme/ultra.0.9.4.zip
2. Login to your server via FTP or hosting File Manager and download Ultra at /wp-content/themes/
3. Use DiffMerge to compare the files you edited with the original: https://sourcegear.com/diffmerge/.
4. In the case of style.css just move the individual rules that you edited over to Appearance > Custom CSS:

/* This is a comment in CSS - use comments to add section titles so you know what your Custom CSS does */

5. If you’ve edited files other than style.css, let me know and I’ll explain what to do with those.

Hi 🙂

Just a quick repeat of what we discussed over email. If you use Meta Slider the slider should site directly under the menu. If not, and you’re placing a slider via Page Builder AND are using a Full Width, No Page Title page template you could then use the following at Appearance > Custom CSS to remove normal page padding:

/* Full Width No Page Title Templates */

.home.siteorigin-panels-home .site-content,
.page-template-home-panels .site-content,
.page-template-full-width-no-title .site-content > .container,
.page-template-default-no-title .site-content > .container,
.blog .site-content .container.no-blog-title {
  padding-top: 0;
}

Appearance > Custom CSS is added by the plugin Simple Custom CSS and is safe place to store Custom CSS snippets. Remember not use Appearance > Editor as all WordPress themes completely overwrite during theme updates.

Hope that helps.