Hi Manning,

It is possible by using the "Build Your Own" header but you need to add some small CSS codes to achieve that.

If you're looking for professional help in this matter, there's always someone available for such tasks on Codeable or WP Kraken website. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.

Thanks for your understanding.

Hi Manning,

As mentioned by Ylli you can use the Build Your Own but if you want in the same line to add the menu to the left and another menu which is right aligned then you need to add extra CSS.

Can you please share your site credentials here, because we need to login to your site and see this issue live. Your information is safe (private) in this thread.

To include your credentials click Insert Credentials button in the editor toolbar. (See how)

Hi Manning,

I have added this CSS to Custom CSS:

.header-block__items-row {
    width: 100%;    
}
.header-block__item.header-block__item--type-menu-585 {
    margin-left: auto;
}

And added a second menu for the Sign In and Sign Up only, they are now right aligned.

P.S. Please note this is a customization and as mentioned by Ylli we usually do not provide theme customizations so if you're looking for professional help in this matter, there's always someone available for such tasks at WP Kraken or Codeable.

Hi Manning,

1— We don't offer shortcode for the theme search bar but you can add it to your "Build Your Own" menu like this (see video).

2— To change the style of that button first you must add a class to your menu item, to learn how you can do that please see this video.

Then you can go to Custom CSS area and style that button.

Here is an example that we used for the Restaurant demo:

/* Menu: Special button */
@media screen and (min-width: 768px) {
    .special-menu-button a{
        -webkit-box-shadow: 0 10px 30px 3px rgba(0,0,0,0.08);
        box-shadow: 0 10px 30px 3px rgba(0,0,0,0.08);
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        padding: 4px 15px;
        background: #d09e5b;
        color: #fff !important;
        margin-left: -15px;
    }
    
    .special-menu-button a:after {
        background-color: transparent !important;
    }
}

Have a nice day!