Is it possible to get a menu similar to this

Hi there,

it will take a few steps to make that happen.

1. You would need to disable the Mobile Header in Customizer > Layout > header.

2. Disable the Off Canvas Panel in Customizer > Layout > Off Cavnas

3. You can use the Appearance > Widgets -> Header Widget to add your Icons.

4. In Customizer > Layout > Primary Navigation - set the Mobile Menu Breakpoint to 0 so it never switches to the hamburger.

5. Once thats done we can look at the CSS required to make the navigation slide.

Do you have a staging server ? As it may make sense to do the work their first.

I have an option for a staging site but I don't have it set up yet.

I did however complete all of the steps above and would need your help on CSS if you don't mind. Thanks.

Try this CSS:

#site-navigation .main-nav>ul {
    flex-wrap: nowrap;
    max-width: 100vw;
    overflow-x: scroll;
    scroll-snap-type: mandatory;
}
#site-navigation .main-nav>ul > li {
    scroll-snap-align: start;
}
#site-navigation .main-nav>ul > li > a {
    font-size: 16px;
    width: max-content;
    padding: 0 10px !important;
    text-align: center;
}

This worked but how do I make tbe logo area smaller and the social icons go to the top right?

The black area is just too large.

Hi Heath,

Try adding this CSS in additional CSS as well:

@media(max-width: 768px) {
    .site-header .inside-header {
        flex-direction: row;
        margin-left: 20px;
        margin-right: 20px;
    }

    .site-header .inside-header .header-widget {
        margin-right: 0;
    }

    .site-header .inside-header .site-logo img {
        height: 65px;
        width: auto;
    }
}

You may alter the values to your preference.