[Resolved] Navigation in header or?

[Tobias Hjorth]

Hi

Is it possible to move either the menu up into the header and have my logo next to it like Art Wolfe has it here : http://artwolfe.com/

I don’t know if the means excluding the header altogether and ad the logo of the left side of navigation or the other way around?

A small thing, is it possible to change the search loupe to a search text box or text?

[Tom]

Have you tried floating the navigation to the right in “Customize > Layout > Navigation Position”?

Then you can reduce the spacing of the header, and it should end up looking very similar to that website.

Not sure what you mean about the search?

[Dee Broughton]

I did something like that here:

http://elt.international/

I did it by having no actual header and, instead, styling the first menu item to act as the header, but I think the artwolfe one is done Tom’s way.

[Tobias Hjorth]

Hi Tom

I tried fiddling with it but always ends up with a weird look. Perhaps I should play with it more

[Tobias Hjorth]

Weird my post was cut in half.

Hi Dee

Yes exactly like that, would you be so kind to share css you did to make it look like so?

[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!

[Tobias Hjorth]

Hi Again Dee

Thank you so much for your contribution. I firstly did what Tom wrote and that pretty much solved what I was looking for. I’m grateful you took your time and effort into helping another Generatepress user. – Means a lot 🙂

[Author]

Posts