[Support request] Style search bar and icons in header

Home Forums Support [Support request] Style search bar and icons in header

Home Forums Support Style search bar and icons in header

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1937128
    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!

    #1937370
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1941468
    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?

    #1941774
    David
    Staff
    Customer Support

    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.

    #1941920
    Thies

    Thanks! Almost there!

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

    #1941924
    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.

    #1941933
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1941939
    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!

    #1941977
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1942005
    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?

    #1942131
    Ying
    Staff
    Customer Support

    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 πŸ™‚

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.