I have an unusual issue with a website that I'm working on. I'm creating a custom theme for an organization built on top of Bootstrap 3 and WordPress but something seems to be throwing some of the media queries off.
For instance, the mobile hamburger menu should change to the web version of the navigation menu at 768px width and up; however, according to Chrome Dev Tools, this is happening at 751px and it doesn't show any other styles affecting that element.
I've also applied left margins to the li elements of the main nav: 12% at 751px (which wouldn't be necessary if nav didn't switch at 751px) and 4% at 768px. However, the 4% margin is overriding the 12% margin for some reason.
I don't consider myself a novice but this really has me puzzled.
The website is still in production so you can access it at: http://176.32.230.22/amldesignstudio.com/production/hea/. I'd greatly appreciate any help with this!
--Edit--
I'm adding a link to a screenshot from Chrome with Dev Tools visible showing the expanded menu with the Body 752px wide.
https://www.dropbox.com/s/x7de3qqjrx9crru/HEA-Breakpoints.PNG?dl=0
It's working on 768px. Missing px is your scrollbar. Use dev tools with mobile view so you see.
