Header menu alignment

Hi there,

what happens on mobile?
ie. where would the login and register buttons go.
Would they show inside the mobile header or inside the navigation menu ?

OK. We can do the desktop first.
And then revisit the mobile.
But first you have this CSS on your site which is affecting the menu list:

ol, ul {
    margin: 0 0 1.5em 1.5em !important;
}

Can you replace that witH:

#page ol,#page  ul {
    margin: 0 0 1.5em 1.5em;
}

Then it will only affect lists in the page content. Not the navigation.

1. Add this CSS to your site:

@media(min-width: 769px) {
    .main-navigation,
    .main-navigation .main-nav {
        flex: 1;
    }
    .main-navigation .main-nav .pushright {
        margin-left: auto;
    }
}

`

2. In Appearance > Menus give the Register <a href=”https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes”>menu item a CSS Class</a> of pushright

3. In Customizer > Layout > Primary Navigation and disable the Nav Search.

Once thats done. We can look at the mobile menu.

OK, to add the button into the Mobile header.

1. Create a new Block Element in Appearance > Elements:

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

2. Set the Hook to menu_bar_items

this hook is positioned to the side of the menu / hambuerger menu.

3. Set the Display Rules > Location to Entire Site

4. Add your button to the element, and in Advanced > Additional CSS Classes add: hide-on-desktop hide-on-mobile

After that can you disable the Off Canvas Panel in Customizer > Layout > Off Canvas so I can look at the mobile menu item styles