Header Width Snapping

@raftingspot,

Second layout
Since you’re using the boxed layout with quite a lot and long menu items as well as the search icon, the menu is dropping to two rows on displays below 1200px width.

If it’s okay to have two rows, you could make the spacing smaller with this CSS (another solution down below unter Your question:

.nav-container #main-nav > ul > li > a, 
.nav-container #main-nav .search-wrapper i {
  padding: 10px 0;
}
.nav-container.floated.fixed #main-nav > ul > li > a, 
.nav-container.floated.fixed #main-nav .search-wrapper i {
  padding: 5px 0;
}

You could also turn off the option through the customizer that decreases the navigation bar height after scrolling a bit, since the navigation bar is already smaller with this.
Another option would be to use the padding reduction only for screen sizes between 1200px and 1024px where the two rows appear. Or you could make the spacing between the menu items smaller and hope that it fits the boxed layout.

Third layout
You’re right with the discussion whether there has to be layout three when there is layout four.
This happens from 1024px to 992px. For example iPads in landscape mode often have 1024px width. Since there is no hover on this devices a normal menu wouldn’t be optimal. That’s why the navicon (the three bars) are there. However since some monitors are still just 1024px width (if one can trust this statistic, about 3% out there), the behaviour of the navigation bar and header image is still the same.

Your question
To have the first layout for screen sizes with the second layout you could try this CSS to reduce the left and right space between the menu items:

#main-nav ul li {
  padding: 0 6px;
}

or to apply it only for these screen sizes with the two rows:

@media only screen and (max-width: 1200px) {
  #main-nav ul li {
    padding: 0 6px;
  }
}

To remove the third layout and get the fourth behaviour earlier use this CSS:

@media only screen and (max-with: 1024px) {
  .has-header #masthead.above:not(.above-solid) .topbar, 
  .has-header #masthead.above:not(.above-solid) .nav-container,
  .nav-container {
    background-color: #353535 !important;
  }
}

Please let me know if this is what you’re looking for and provide some feedback whether you need some more assistant with this.

Let me know and thank you for your time.

You’re welcome.

@terrathemes,

Sorry for the delayed response.
Perfect – your recommended changes worked nicely (small typo on width but I eventually figured it out).
I took out the search bar, as I really didn’t like it after you pointed it out.
I used this CSS code to solve my issue for “layout 2”

[code language="css"]
@media only screen and (max-width: 1200px) {
#main-nav ul li {
padding: 0 6px;
}
}
@media only screen and (max-with: 1024px) {
.has-header #masthead.above:not(.above-solid) .topbar,
.has-header #masthead.above:not(.above-solid) .nav-container,
.nav-container {
background-color: #353535 !important;
}
}
[/code]

Now, just one last thing I noticed.
On mobile screen sizes, the Navicon menu gets crunched for menu options with 2 lines (Guide Certification and Rafting Spots). Is there a way to increase this space? Even when there isn’t 2 lines, but still in the Navicon, is there a way to increase this padding slightly to ensure letters don’t overlap top to bottom? I tried a few things, but to no avail.

Once again, thank you for your time and I’m really liking your theme so far (and the quick support).

@raftingspot,

small typo on width but I eventually figured it out).

you’re right, I misspelled it. Unfortunately I can’t edit the post anymore but I’m glad you found it.

Is there a way to increase this space?

You can increase the line height with this code:

#mobile-menu ul li a {
  line-height: 1.3;
}

Maybe you have to adjust the dropdown arrows with this, depending on your final font size. 45px is the default value.

.btn-submenu {
  line-height: 45px;
}

Once again, thank you for your time and I’m really liking your theme so far (and the quick support).

You’re welcome. If you don’t mind I would really appreciate your feedback at Meteorites review section.

@terrathemes,

Perfect, I believe this has fixed all of my issues.
Thanks for your time and quick responses!