Hello,

I've been working on the Authoring Tool to customize the layout and design of an existing template, which was a slight variation of the Vanilla. What I've been doing is using the CSS field within the Project Settings, to add additional CSS that will alter positioning, backgrounds, sizes, etc... of existing page and menu items.

So far, all has worked well, other than trying to modify the 'page-header-content-inner'. I've discovered that the title and body text that is input when editing a new page, is also the same title and body text that appears in the menu item. So, what when the page-header-content-inner is styled to have a different background-color, for example, both the menu item and the page header content have the new background color.

Is there a way to style the page-header-content-inner without altering the menu item?

Ideally what I want is for the page title header to only contain the title, and not the body text. However, I still want the menu item to show the page title and body text description.

Some things that I have tried:

/* Thought I'd try using the page ID here, but didn't work */

.page-header-content-inner.reducedHeight {
  height: 100px !important;
  overflow: hidden !important;
}

/* Thought I'd try using the page ID here, but didn't work */

#5a285bb9d04e9bdbb84b8715.page-header-content-inner {
  height: 100px !important;
  overflow: hidden !important;
}