[Resolved] Header Modifications in InMotion Hosting Quickstarter Site

Hi Jim-

Sorry for the frustrations, we’ll be happy to lend a hand! I’ll try to tackle your questions one-by-one.

Why can’t I have a logo and a title in the header?

The theme is designed this way to avoid repetition, because typically a logo will include the site’s title in the graphic. Here’s a way you can work around this.

First, before you select your logo, enter the text you’d like to display in the “Tagline” field. Then add your logo and save your progress.

Next, navigate to Customize > Advanced > Custom JS & CSS and paste the following line into your Custom Theme CSS field:

h3.site-description.invisible { visibility: visible; }

This will display anything you entered into the tagline right below your logo.

The page links are in a widget. They are in the middle of the page.

It looks like your site was set up with the menu in the “Header Bottom” menu area, which is centered by default. Navigate to Customize > Menus > Primary and look for the Menu Locations setting. If you set this to Primary Menu then it will be at the top-right, rather than centered below the header.

I… placed 2 page links under another. You can still see them on the menu of the home page.

Generally speaking, the menu remains the same across all your pages for a consistent navigation experience for your site’s visitors. There are ways you can accomplish this, such as the Conditional Menus plugin.

If you’re trying to create a drop-down style menu, where some page links only show “under” others, make sure that when you’re dragging them to the right spot, they show up as “indented” underneath the parent menu item. Keep in mind that WooCommerce special pages, like Cart, Checkout, and My Account won’t let you add them as submenus, as you can see in this screenshot:

Usually a shopping cart icon is placed in the upper right of the header. It is not there.

Probably the easiest way to accomplish this is with the WooCommerce Menu Cart plugin, which will add the cart icon, along with information like number of items and cart total to your menu.

You can also add a custom class to your menu item for the cart to add the icon. Simply add the class fa fa-shopping-cart to your menu item, as in this screenshot:

Hi Jim-

Glad to hear you’ve got the Cart icon solved!

If you look closely at the logo on this site, you’ll see that the text is actually a part of the logo image. However, you can still accomplish this with a little more Custom CSS. I took a few minutes to create this video to walk you through the process:

Here’s the Custom CSS from the video:

h3.site-description.invisible {
	visibility: visible;
	padding-top: 40px;
}
div.site-title { float: left; }
#secondary-menu { text-align: right; }

Hopefully this gets you closer to where you’d like to be! Please let us know if you’re still having trouble getting it to look the way you need it to, we’ll be happy to help.