[Support request] Header and Navigation design

[Nick]

Hello everyone on the GP team and many congrats for the awesome work!
I have created the following header layout https://ibb.co/h91S5HN using the customizer, some elements and some css provided below:

@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}

#site-navigation,
#primary-menu,
.menu-bar-items,
.main-navigation .inside-navigation {
flex: 1;
}
.menu-bar-items {
justify-content: right;
}
}

My questions are:
1. How do I align the search icon right next to the “My account” icon
2. How do I make the entire thing sticky? From the top bar all the way to the secondary navigation.
3. Is this way, including the css, considered best practice to create such layout? Would it be better to create the entire thing from scratch in a single Header Element using GB? I have already created most of it as an Element, but I am having trouble including the Primary Menu and Woocommerce mini-cart into it. So, if it’s better/easier to create the entire header as an Element, then I would kindly ask for instructions on how to include the Menu and the Woo cart.

Thank you so much in advance, and keep up the amazing work guys and gals!

[Ying]

Hi there,

The attached link has a different layout:
https://www.screencast.com/t/jDTLAlqQ
Can I see the site with this header layout?
https://ibb.co/h91S5HN

[Nick]

Hey Ying, thank you for the reply. The link is correct and showing everything now.

I was going to create 2 identical “above_header” elements (one for logged in users and one for logged out) and forgot to remove the rule, so it was showing only if you were logged in.

Update: 1. How do I align the search icon right next to the “My account” icon? Has been resolved by adding the FiboSearch (plugin) block inside a container.

[Ying]

Let’s focus on 1 question at a time:

2. How do I make the entire thing sticky? From the top bar all the way to the secondary navigation.

1. Disable the sticky navigation at customizer> layout > sticky navigation.

2. Go to appearance > elements, create a header element, and select merge for Merge with Content option under the site header tab.

3. Add this CSS:

body .header-wrap {
    position: sticky;
    top: 0;
}

This will make your CSS that’s targeting sticky navigation to be invalid, but this is the only way to make the entire thing sticky.

Once it’s done, we can take another look to re-position the elements in your header area.

[Nick]

Thank you for the guidance, Ying. Followed these steps and this is what we managed to make sticky: https://ibb.co/bR34Kc6

This is surely an improvement, however there are some issues.
1. The “above_header” element isn’t included in the sticky header that we achieved. This is the element in question that is missing: https://ibb.co/MDHgFmd
2. The sticky header is transparent, resulting in the content being visible through it when scrolling down as it can be seen here: https://ibb.co/3sP67nq
3. When logged in as admin, the WordPress admin top bar overlaps a bit with the sticky header like this: https://ibb.co/kMQ2kqy
And since I mentioned the WP admin bar, do you have any idea why it’s still in Greek? My profile language is set to English, and the entire WordPress backend obeys that setting, but not the admin bar. Pretty unimportant so you shouldn’t bother answering unless it’s a very easy thing to change like a simple setting or line of code, otherwise ignore.

[David]

Hi there,

1. the before_header hook with a Priority of 2 should position that element inside the header-wrap so it becomes part of the sticky element.

2. you will need to give the site header a background color.

3. In addition to the CSS Ying provided add:

body.admin-bar .header-wrap {
    top: 48px;
}

You may need to tweak the 48px to suit the height of the admin bar.

4. To the best of my knowledge the Admin Bar uses the Settings > General > Site Language, and not the User Locale.
I found this, which may work for you:

https://wordpress.stackexchange.com/a/403028

[Author]

Posts