Menu bar same as this website

Hi there,

I believe we can do this with just the customizer settings.

First, set the Primary Navigation's location to "Below Header" as shown here - https://share.getcloudapp.com/p9uAkG7A . This sets the menu under the logo, making space for the header widget.

Second, add the social media icon widget you use on the Header Widget area. With this, you now have social media link icons on the side of the logo, above the primary navigation.

Third, add in the Secondary navigation and have its location set to "Below Header" as shown here - https://share.getcloudapp.com/Z4uKjkqR - so the secondary navigation appears below the primary nav.

This is the expected result - https://share.getcloudapp.com/lluNoY9R

The styling is raw, but the layout is already close enough. :)

Every thing was perfect but the widgets are displaying Vertically. I want to display them Horizontally

Add this CSS to make the widgets display horizontally.

header#masthead .header-widget {
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
}

For the alignment and spacing, try this:

aside#text-6 h2.widget-title {
    margin-bottom: 0px;
}

.header-widget > *:not(:last-child) {
    margin-right: 10px;
}

ul.lsi-social-icons > li {
    margin-bottom: 0 !important;
}

Every thing is okay with the Header. Please check the website, the stick menu elements are on the left side. I want to move Menu and Search box to the right side.

In the sticky menu, I want logo on the left side, Menu in center and Serch box to the right

You can enable the navigation search on Appearance > Customize > Layout > Primary navigation and then add this CSS:

@media (min-width: 769px) {
    .main-navigation li.search-item {
        display: none;
    }
}

This is so that the default search icon doesn't show up on desktop.

You didn’t get me correctly. There’s already a search box in the site. I’m the stick navigation, I want to display the search box on the right side.
And the menu items at the center and logo at the left

You didn’t get me correctly. There’s already a search box in the site. I’m the stick navigation, I want to display the search box on the right side.
And the menu items at the center and logo at the left

Ah I see. Is this not for the mobile view?

If it's the one for desktop, try this CSS:

@media(min-width:769px){
.custom-search {
    margin-left: auto;
}

.navigation-branding {
    margin-right: auto;
}
}

This css pushes the search to the right side and logo to the left side but the menu items are not absolute centered.

Also, this won't be perfect on all viewports because flex wrapping will occur on tablets because the items won't fit in line.

If you want absolute centered navigation, we can do that as well by adding this CSS:

div#primary-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

div#primary-menu ul#menu-primary-marketer-1 {
    flex-wrap: nowrap;
    white-space: nowrap;
}

But overlapping on small viewports will occur because all the items simply won't fit the horizontal space.

Worked perfectly, Thanks.
By the way, there's some issue with secondary navigation on mobile. The first four items are not displaying in the Menu. Could you please check that?

By the way, there’s some issue with secondary navigation on mobile. The first four items are not displaying in the Menu. Could you please check that?

It's because you have this custom CSS:

#secondary-navigation .main-nav>ul { flex-wrap: nowrap;  scroll-snap-type: mandatory;} 
.secondary-navigation .main-nav>ul li { scroll-snap-align: start;    flex: 1 0 auto; }

The secondary menu scrolls horizontally as shown here - https://share.getcloudapp.com/yAuryrxj - but the cropping happens because the space for mobile is too narrow to fit all of the menu items. Consider setting a mobile menu breakpoint for this so the secondary menu turns into a hamburger menu on mobile so it doesn't look cropped

If you're fine with menu items flex wrapping like this - https://share.getcloudapp.com/9ZudQd2l

Change #secondary-navigation .main-nav>ul { flex-wrap: nowrap; scroll-snap-type: mandatory;} to
#secondary-navigation .main-nav>ul { flex-wrap: wrap; }

Okay, leave that, I want to separate the menu items in secondary menu with "|" (Exaple link dropped privately)

Try adding this CSS:

#secondary-navigation li.menu-item:not(:last-child):after {
    content: "|";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}