Reply To: Navigation in header or?

[Dee Broughton]

Sure, Tobias, here it is, but it’s a rather inelegant work around.

It uses a CSS class in the Navigation Label on the main menu.

For the http://elt.international/ site, the first menu item on the main menu is a custom (link) menu entry and its Navigation Label says all of this:

<a href="http://elt.international" title="English Language Teaching Reviews, News, & Resources" class="mymenuheaderlink">ELT International</a>

Then, in custom CSS there is the styling for the class in that link:

a.mymenuheaderlink, a.mymenuheaderlink sf-with-ul {
  background: #EB7E1E;
  text-transform:none !important;
  padding-left: 10% !important;
  padding-right: 10% !important;
}

a.mymenuheaderlink:visited{
background: #EB7E1E;
} 

a.mymenuheaderlink:hover {
} 

a.mymenuheaderlink:active {
background: #EB7E1E;
}

This is only active in the full screen mode though. I didn’t like it in the mobile version, so in that version, I put a small header, restyle the tagline, hide the main menu, display a secondary menu that makes more sense in mobile. If you use “inspect element,” you’ll see how the two views are different. Added benefit of doing the mobile that way is that it creates a design that my users in India will appreciate as it mirrors the Indian flag.

Good luck!