Navbar at bottom of page hero

Hi Stephane,

I’m a GP Premium newbie, so please excuse me if my question is trivial or has already been answered elsewhere. (I did search the forum, though.)

This is actually tricky to deal with. And I'm not exactly sure what you mean.

I've tried accessing the site to get a context but the link provided seems to be in maintenance mode so I wasn't able to see the layout. Can you temporarily lift the maintenance mode for us to check?

Also, Do you have any mockup image of how you want things to be laid out? So we have a clearer idea on what layout to achieve and how to approach it. :D

Hi Elvin,

Can you temporarily lift the maintenance mode for us to check?

Of course. (Stupid me!) Maintenance mode now deactivated.

Do you have any mockup image of how you want things to be laid out?

Sure. Sending you access details in the private-information section.

Let me know if you need more. Hoping that you can crack that nut.

Best regards, Stéphane

Hi there,

it will require a little custom work.

1. in Customizer > Layout > Header - set ALL the padding ( desktop and mobile ) to 0.

2. Now create 2 x Hook Elements.
The display rules for both Hooks need to be the same as the Header Element.

#Hook 1 - Open Custom Wrapper.
Add this content:

<div class="custom-header-wrap">

Note: The editor will automatically add the closing </div> - you must delete this.

Select Hook: generate_before_header
Set Priority to: 0

#Hook 2 - Close Custom Wrapper
Add this content:

</div>

Select Hook: generate_after_header
Set Priority to: 15

Once thats done let me know so i can look at the CSS requirements for positioning the nav.

Hi David,

Er… I'm a bit confused (or dumb) for the first steps that you tell me to do. In Appearance > Customise > Layout > Header, I don't see any numeric padding. What I have is this:
• Header Presets – Current
• Header Width – Full
• Inner Header Width – Contained
• Header Alignment – Left
• Use Navigation as Header – unchecked
• Mobile Header – Off
Can you please clarify, I don't get it.

Meanwhile, I'll proceed with the remainder of your guidance. Thanks.

Best regards, Stéphane

Open Custom Wrapper and Close Custom Wrapper hooks implemented.

Awaiting your reply to dispell my padding-related confusion, as per my previous reply (please). Thanks.

Best regards, Stéphane

Can you confirm the URL on the site ? The link in your original topic is returning a 404 error ?

I confirm the URL…

… but in the meantime I had set the page to Private in a burst of overzealous discretion! Now corrected. Apologies for the inconvenience.

Best regards, Stéphane

Back to your instructions five replies ago:

1. in Customizer > Layout > Header – set ALL the padding ( desktop and mobile ) to 0.

I now understand what you meant. I didn't have the Spacing add-on activated, hence I couldn't see padding parameters. I've now activated that add-on and setall padding to zero as you said.

Does it help to get the navbar at the bottom of the page hero / header?

Best regards, Stéphane

Hi Stéphane,

Try add this CSS:

.home .header-wrap {
    bottom: 0;
}
.home .custom-header-wrap {
    position: relative;
}

Then activate the sticky navigation at customizer > layout > sticky navigation.

Adjust the menu item height to 64pxto match your current primary menu settings.

Then add this CSS:

.home nav#sticky-navigation {
    width: 586px !important;
    margin-left: auto;
}

Let me know if this helps :)

Hi Ying,

Yes, it helps very nicely… but it creates a problem with sticky navigation. The great thing is that the navbar is now at the bottom of the page hero; thanks a lot. But the problem now is: when that navbar reaches the top of the window, it's a replaced with a completely different navbar (partial width, white background, etc.) To explain better, I've done a little screen-capture video that you can look at.

I looked and looked in GP Premium to see where I could change settings to make that navbar identical to the original one, but I didn't find it. Hope you can help for the last mile (or rather the last yard, I hope!).

Best regards, Stéphane

P.S.: I'd like to do something similar with the navbars on other pages. I assume that I can make it work with some CSS similar to what you gave me, but what CSS class selector should I use instead of ".home" ?

Since you've added some social icons, the navigation width changed, so try this CSS:

.custom-header-wrap nav#sticky-navigation {
    width: 891px !important;
    margin-left: auto;
    background-color: rgba(0,0,0,0.27);
}
.custom-header-wrap nav#sticky-navigation a {
    color: #ffffff;
}
.custom-header-wrap nav#sticky-navigation .main-nav ul li.current-menu-item a {
    background-color: rgba(0,0,0,0.27);
}

instead of:

.home nav#sticky-navigation {
    width: 586px !important;
    margin-left: auto;
}

And use this CSS:

.custom-header-wrap .header-wrap {
    bottom: 0;
}
.custom-header-wrap {
    position: relative;
}

instead of this:

.home .header-wrap {
    bottom: 0;
}
.home .custom-header-wrap {
    position: relative;
}

In this way, if you want to use the same custom-header-wrap method, you just need to add those pages in the display rule of the elements, no need to modify the CSS.

Hi Ying,

This is really really great. I also tried it for other pages, it works too. (Of course, I have to tweak the CSS everytime I change a menu option, but that doesn't happen every day and I can live with that.)

I still have a few things to clean up with those sticky menus, in particular for mobile devices, but at this point I think that you've solved my problem. This wasn't just a two-minute job, I really appreciate the help that you gave me. Thank you.

Best regards, Stéphane

Ah…, one remaining thing which I didn't notice before writing my previous reply…

In Sticky Navigation, when the navbar is stuck at the top, hovering on a menu option makes it show in white on white background, hence unreadable. It should be the same text and background colors as when one hovers on the non-stuck navbar.

I've tried to play with the navigation-colors settings in the elements definitions, to no avail. I suspect that some of the CSS that you gave me in your last reply, namely this one…

.custom-header-wrap nav#sticky-navigation {
width: 891px !important;
margin-left: auto;
background-color: rgba(0,0,0,0.27);
}
.custom-header-wrap nav#sticky-navigation a {
color: #ffffff;
}
.custom-header-wrap nav#sticky-navigation .main-nav ul li.current-menu-item a {
background-color: rgba(0,0,0,0.27);
}

… would need one or two additional clauses with rgba(0,0,0,0.39) when hovering. But I don't know what clauses exactly. (I'm very far from being a CSS expert, particularly when it comes to those :hover things.) Can you help once again (please)?

Best regards, Stéphane

Any chance you can re-add the URL and login to the private information.
When a topic is resolved we automatically delete any private info.
I remarked the post as unresolved so you should have access to the private info.