Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Custom header layout

  • I want to create the following header layout:

    Left side: Hamburger menu – Logo
    Right side: Search icon + other elements probably using the menu_bar_items hook

    At a certain breakpoint smaller than the default mobile breakpoint, I would like to be able to set flex-direction to column so that I can have logo at the top, Search icon + other elements below and hamburger menu at the bottom

    I saw a few threads but couldn’t make it work as intended.

  • Hi George,

    Try this for the smaller screens:

    @media(max-width: 350px) { 
    .inside-header.grid-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    nav#mobile-menu-control-wrapper {
        margin-left: 0;
    nav#mobile-menu-control-wrapper {
        flex-direction: column;
  • Hey Ying, what about the layout I described, how can I achieve that?

  • Can you try adding this snippet first?:

    add_action( 'wp', function() {
    $settings = wp_parse_args(
    			get_option( 'generate_menu_plus_settings', array() ),
    if ( 'desktop' == $settings['slideout_menu'] || 'both' == $settings['slideout_menu'] ) {
    	remove_action( 'generate_menu_bar_items', 'generate_do_off_canvas_toggle_button', 15 );
    	add_action( 'generate_before_logo', 'generate_do_off_canvas_toggle_button' );
    }, 20 );

    Let us know how it goes.

  • Hey Fernando, there is one issue with this. When Navigation Location is set to No Navigation, the search icon also goes away and I need that to be there.

  • Hi there,

    my approach would be:

    1. remove any snippets or CSS related to the nav.
    2. add the logo to the Site Identity.
    3. Customizer > Layout > Header, enable the Navigation as Header.
    4. Customizer > Layout > Off Canvas, enable it for Mobile
    5. Customizer > Layout > Primary Navigation:
    5.1 Set the Mobile Menu Break point to a real high value eg. 10000
    5.2 enable the navigation search,

    At this point you will have across all devices Logo —> Search / Hamburger.

    Now add this CSS, adjusting the breakpoints to suit:

    @media(min-width: 420px) {
       #site-navigation .menu-toggle {
        order: -1;
    @media(max-width: 419px) {
        #site-navigation .inside-navigation {
            flex-direction: column;
        #site-navigation .navigation-branding {
            margin-inline: auto;
  • More than perfect, thanks David!

  • Glad to be of help

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