I'm trying to figure out why when my browser window is at 1200 all menu items are on the same row but when it is reduced to 1096 the last item on the menu wraps.

It isn't until the browser gets to ~1014 that the menu toggles to the mobile view.

Interestingly at 1019 the menu shows fully open!

Maybe reduce the space between menu items?

Any help would be appreciated.

Thanks!

Hi

Do you have a link for the site?

Cheers
Paul

Sorry..yes

cairo.directrouter.com/~rrfb2

Right so this may need tweaking

@media screen and (min-width:1020px) and (max-width:1090px) {
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > span { padding: 8px 20px !important; }
}

Cheers
Paul

Is this a cut & paste into the custom.css file?

Yep

Cheers
Paul

It's in there. Better but still wraps between 1200 and 1090. From 1089 to 1020 it looks good. After 1020 it goes to the mobile menu.

I'm using this site: whatsmy.browsersize.com/ to check my browser size.

Right if you duplicate the media query I gave but adding different breakpoints and increase padding you should be ok

Cheers
Paul

Got it!

Thanks

Nice one

Cheers
Paul