- This topic has 5 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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!
Customer Support
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/h91S5HNHey 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.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
mergeforMerge with Contentoption under thesite headertab.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.
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.Customer Support
Hi there,
1. the
before_headerhook with a Priority of2should position that element inside theheader-wrapso 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
48pxto 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:
- You must be logged in to reply to this topic.
