[Support request] Style search bar and icons in header

[Thies]

Hi,

I’m trying to make this header: https://www.canva.com/design/DAEqWWB7RZQ/ssVJvkgqiNlFgXn_mO-I0w/view?utm_content=DAEqWWB7RZQ&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton. Without the green bar on the top.

Would you be able to explain to me how to move that search bar to the left and how to get those icons on the right? Translation of the text below those icons is: favorites, login and cart.

Working on it here: https://www.winkelstrategie.nl/bengel

Thanks a lot!

[Elvin]

Hi there,

The current structure of your site doesn’t seem conducive to the desired layout as your site’s navigation is outside of your site’s header.

Here’s a suggestion:

Consider placing the menu bar on a secondary navigation and keep the primary navigation inside the Header instead of setting is “Below Header” and then do the desired layout using CSS.

But if you’re fine with just moving the search bar to the left but not move the icons to the right of the logo, perhaps this CSS is enough.

header#masthead .inside-header {
    position: relative;
}

header#masthead .inside-header .header-widget {
    position: absolute;
    left: 0;
}

[Thies]

Thanks for your swift reply and sorry for getting back to you so late. I’m doing this as a side project next to my job, so wasn’t able to test it yet.

Just did. And I was successful with the search bar, but the logo also moves left, while the setting is set to center. I chose the float right option for the menu. But it pushes the logo to the left.

Can you guide me a bit more on this?

[David]

Hi there,

you can position the logo in the centre with this CSS:

@media(min-width: 769px) {
    .site-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

You may need to adjust the min-width: 769px to match your mobile menu breakpoint.
And you will need to add some top/bottom padding to the Customizer > Layout > Header to give its some space.

[Thies]

Thanks! Almost there!

I have not padding options in the layout header section. Any suggestions why that could happen?

[Thies]

Other question.

I created a usp bar in elements. Works fine before the header, but I enabled sticky navigation. When I scroll down, I lose that USP bar, as well as this nicely style header now, to be replaced by an unstyled navigation.

[Ying]

Hi Thies,

I have not padding options in the layout header section. Any suggestions why that could happen?

Make sure the Spacing module is activated at appearance > GeneratePress.

If you don’t need animation when Header transform to sticky navigation, then you can deactivate the sticky navigation.

We can help with some CSS solution later 🙂

[Thies]

Spacing was off indeed. Thanks for that.

When I deactivate sticky navigation, I lose my navigation when scrolling down.
I’m looking for a way to show the exact same header with USP’s and secondary navigation when scrolling down.

Any suggestions for that?

What a great and fast support you have by the way!

[Ying]

Try add this CSS:

.gb-container-beb1bb75, #masthead.site-header, .secondary-navigation {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 999;
}
.gb-container-beb1bb75 {
    top: 0;
}
#masthead.site-header {
    top: 33px;
}
.secondary-navigation {
    top: 121px;
}

Let me know 🙂

[Thies]

works like a charm :).

Thanks a lot!

One additional question. When resizing to mobile the header disappears, leaving me with the top bar and the secondary nav. How do I set that in such a way that the topbar show only 1 row and the secondary nav shows as a hamburger in the header with the logo in the middle?

[Ying]

When resizing to mobile the header disappears

It’s because you are using mobile header, so the desktop header will be hidden on mobile.

For the top bar, the container block under Grid block is set to 100% in width on mobile, you’ll need to make them to33% so they can stay in one row. But I feel it will be too crowded on mobile.

secondary nav shows as a hamburger in the header with the logo in the middle?

You can add the logo image to hook element or block element, choose generate_inside_secondary_navigationas the hook. And add hide-on-desktop class to the image, so it won’t show on desktop.

Then we can use some CSS to align it to center, and also some CSS to move the secondary navigation up on mobile 🙂

[Author]

Posts