Navigation on the right, logo on the left

This topic has 15 replies, 3 voices, and was last updated 4 years ago by Ying.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
May 16, 2022 at 9:32 am #2221422

mkjj

I would like to have the logo on the left, and the navigation elements on the right (above the page hero). It seeems like a pretty easy task, but I can’t get it to work. I’ve created an header element for a fullwidth image, and set “navigation location” to “above header”. Header width is set to contained. However, it simply doesn’t work. The header DIV uses all the space, so that the the logo is always below the navigation: https://temp.herrenhof.net/

Could you point me in the right direction?

Thanks, Mike

May 16, 2022 at 9:59 am #2221454

Ying
Staff
Customer Support

Hi Mike,

Go to customizer > layout > primary navigation, choose float right for the navigation location.

May 16, 2022 at 10:09 am #2221464

mkjj

Hi Ying,

this is exactly my setting, but it does not work. I know that this is not a GP issue but me being thick as a brick. 🙂

I’ve just found out that it works when the header element is disabled.

Thanks, Mike

May 16, 2022 at 10:13 am #2221473

Ying
Staff
Customer Support

I’ve just found out that it works when the header element is disabled.

Hum, can you go to the header element and check what’s the settings for Navigation Location?

May 16, 2022 at 10:35 am #2221505

Lucie

I have exactly the same issue: would like navigation on right, logo on left. I have clicked ‘use navigation as header’. With browser Inspector, can see that the logo is specified, and is valid file. For mobile, it works. Does enabling mobile disable desktop logo?

See img below.

THanks in advance

May 16, 2022 at 10:39 am #2221508

Ying
Staff
Customer Support

Hi Lucie,

Can you check the header element, have you selected anything in the navigation location field?

Let me know 🙂

May 16, 2022 at 11:01 am #2221523

Lucie

Ying, not sure exactly what to check. Are you asking if I created an Element that is appearing on frontpage? No.
Or something else? If you specify (sorry not a GP expert) exactly where to look, that would help.
Here are my settings for “Customizing/Layout/Header” in case that helps.

May 16, 2022 at 11:24 am #2221548

Ying
Staff
Customer Support

Go to appearance > elements, check if there’s a header element.

If so, edit the header element, set the navigation location (under site header tab) to Default.

Let me know if there’s anything unclear 🙂

May 16, 2022 at 12:14 pm #2221593
mkjj
I had to change the navigation to full width and add this CSS to my child stylesheet:
```
.inside-navigation {
  max-width: 1200px;
  margin: auto;
}
```
I’m still not quite sure what “navigation as header” means. Could you please explain this in more detail?
May 16, 2022 at 12:31 pm #2221621

Ying
Staff
Customer Support

Hi Mike,

I updated the reply here, can you check? Thanks!
https://generatepress.com/forums/topic/navigation-on-the-right-logo-on-the-left/#post-2221473

May 16, 2022 at 12:32 pm #2221625

Lucie

Ying, I went to appearance > elements, there’s a header element but nothing attached to frontpage (I set exclusions to Entire Site) which should be equivalent to no headers at all, correct?

May 16, 2022 at 12:48 pm #2221639

Ying
Staff
Customer Support

Ying, I went to appearance > elements, there’s a header element but nothing attached to frontpage (I set exclusions to Entire Site) which should be equivalent to no headers at all, correct?

I can still see the header element is taking place on your homepage, it’s using the mergefeature.

If there’s a display rule set, excluding entire site may not work.
You can try set the header element to draft and clear cache or disable your cache plugin for now.

Let me know how it goes.

May 16, 2022 at 12:48 pm #2221640

mkjj

Hi Ying,

sorry for all the confusion. I’m pretty slow today, I guess. In the header element the navigation was set to “above the header” from the very beginning. “Navigation as header” did the trick. I’ve just found out that my additional CSS is not necessary. I just had to set the inside width of the navigation to contained. I still don’t really understand what “navigation as header” means. Anyway, now I know how to use it. 🙂

Thanks, Mike

May 16, 2022 at 1:28 pm #2221660

Lucie

Hi Ying, thanks. I trashed the frontpage element (that was previously set to excluding entire site) and changed the published setting to draft for the only other element that might be header related. Can you check to see if they are still in play? I reloaded page, but still can’t see the logo.
Thanks again.

May 16, 2022 at 1:53 pm #2221684

Ying
Staff
Customer Support

in the header element the navigation was set to “above the header” from the very beginning.

Yes, that’s overriding the customizer option to set the navigation to float right.

I would suggest set the navigation location to defaultin the header element, so the customizer settings can take place.

Navigation as header option removes the default header, instead it adds the site branding(logo, site title, etc.) to the navigation.
Author

Posts