menu/header like this site

Hi Anders,

Try to follow the steps below:

1. Go to Customizer > Layout > Primary Navigation, set Mobile Menu Breakpoint to 9000px, so that the navigation turns to hamburger icon in device under 9000px.

2. Go to Customizer > Layout > Off Canvas Panel, set Off Canvas Panel to mobile only.

3. You can add the button and login icon by using generate_menu_bar-items hook.
https://docs.generatepress.com/article/generate_menu_bar_items/

Once you've done these steps, we can help you with arrange the order or the items in the header.

Let me know :)

ok, but would't it be more easy just to activate the off canvas burger menu on desktop?

And then in some way move the burger menu icon to the left?

If you want to go that way, be sure to assign an empty menu to primary navigation, otherwise there'll be 2 menus.

Here's an example:
https://docs.generatepress.com/article/header-examples/#example-1

ok, I'm just asking :)

If I go for the first solution... how would you move the burger icon next to the logo?

If you go with the 1st solution, try this CSS to move the menu icon to the left:

.menu-toggle {
    margin-right: auto;
}

ok, I have setup the primary menu with the 9000px

Can you try the exact solution here first?
https://docs.generatepress.com/article/header-examples/#example-1

It should work better :)

Hi @leo

Done.

Now I need.

1. "menu" below the burger
2. move burger to the left
3. the cool menu styling
4. a button to the right

Any idea how to do like the example?

HI there,

1 and 3 you can add this CSS:

/* Add borders to menu items */
#generate-slideout-menu .slideout-menu li {
  border-bottom: 1px solid #bbb;
}
/* reduce opacity of off canvas overlay */
.slideout-overlay {
  background-color: rgba(0,0,0,.1);
}
/* Postion off canvas panel below header */
.main-navigation.offside {
  top: 90px;
}
/* mobile header */
@media(max-width: 768px) {
  .main-navigation.offside {
    top: 70px;
  }
}

Next add the button - using a Block Element:

https://docs.generatepress.com/article/block-element-overview/

You can use the generate_menu_bar_items hook to put the button inside the navigation.

Once thats in place we can look at the CSS required to position the Hamburger.

Hi @david

The css is added but the "menu" text is still next to the burger icon, and not below.

Also the button is added – but way too big, I did try to adjust it, but for some reason is does not change size.

I have generateblocks pro installed.

Hi Anders,

Try this CSS to move the menu below burger, then next to logo:

.inside-header.grid-container .menu-toggle {
    order: -1;
    margin-right: auto;
    flex-direction: column;
    display: flex;
}
.mobile-menu-control-wrapper {
    margin-left: 0;

For the button, you'll be able to edit its padding in block editor, I simulated the result in developer tool.
https://www.screencast.com/t/Hqx9rr6vg

It was too difficult - so I found another solution. Thanks for your help :)

You are welcome :)