How to create a responsive header (logo, menu, search bar) in Block themes

  • Hi,

    I am new to WP and trying to design a simple website and stuck with creating a Header. All I want is a simple Site Logo on the left, a menu (navigation) and Search Bar towards the right side of the header when viewed on Desktop. And I am able to design it as I want on desktop. (used multiple methods using 2 rows where first row has site logo and navigation and second row has the search bar or using 2 columns with first column having a row within which has site logo and menu and second column which contains the search bar or 1 row with all 3 items).

    However, when I change views to Tablet/Mobile mode, this breaks. For Tablet, I want the site logo on the left and menu in a hamburger icon to the Right and the Search bar below this spanning the entire width (I have checked the “Allow to wrap to multiple lines”). The layout just doesn’t work. On Tablet Mode Site Logo and Menu are on the top with the search bar below but doesnt span the entire width and on Mobile view, the site logo isnt resizing.

    How do I implement this? I am on 2024 theme with Twentig plugin.

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)

  • What’s the address of the site you need help with?

    Thread Starter pradg

    (@pradg)

    Hi George,

    working on Local WP. Not sure how I can share that. I have come close somewhat. Here’s what I have done.

    Group block at the top. 1 Column inside it. 2 columns inside the parent column. 1 Row inside the first of the 2 columns which in turn has the Row block which has the Site Logo and Menu (Navigation). The 2nd column has the search bar. THis now works fine on Tablet/Mobile where the site logo and hamburger menu is at the top and Search Bar is below that. However, the gap between these 2 columns is more than what I’d like. Since there are no responsive controls, I am unable to reduce the gap.

    I then used Kadence blocks to do the same and used Row Layout in place of column view and able to reduce the gap between site logo and menu and search. However, with this, when i click on the hamburger menu, the menu is displayed behind the search bar (2nd image). Not sure how to fix this.

    View post on imgur.com
    View post on imgur.com
    View post on imgur.com
    • This reply was modified 2 months, 4 weeks ago by pradg.
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.