I’m going to take the red pill on this one and say that the only way to improve the navigation is to come up with better names for your menu items. There are a few best practices that make navigation a good user experience:
- Short, descriptive item titles
- Limited number of navigation items
- An outline that clearly represents your website’s structure
- Wording that is easy to understand to someone who is unfamiliar with your website
I challenge you to find an example of a popular website that has a navigation item with 6 words in it, like your “One on One English language Classes”. You probably can’t find one and there are good reasons for this. Good navigation always gives extra attention to user experience. You want your visitors to click those links so in the end it all comes down to this question: “What are my visitors likely to be looking for?”
Here are a bunch of hints I suggest to improve your navigation:
First of all, ditch the “Home” link. The site title already links to the home page and there are studies that have proven users are familiar with clicking it to go to the home page.
Change the wording of “One on One English language Classes” with something that’s more descriptive. As someone who is unfamiliar with your website I have no idea what to expect behind that link. The best guess I can come up with is one trainer and one student per class, but that’s just a guess and it might not be enough to tempt me to click it. “Language services” also sounds vague to me. The question that pops to mind is what kind of services? Translations, interpreting and the like? Again, that’s a guess.
Try to keep item names at one or two words. Maybe 3 maximum if there’s a transition word like “and”, “for”, “at” etc. For example I would ditch the “Language” keyword from “International Language Exams”. It’s already clear the website is about language.
These are mostly educated guesses and since I’m not familiar with your website they may not be the best suited but should give you an idea of how to create a better navigation structure.
Finally if you still can’t make the menu fit, here are some things you can tweak. Any code below should go under “Theme Options → Design” under the “Custom CSS” field:
Make the width of the page container smaller:
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Currently the container is set at 1110px. I don’t recommend going over 1170px as that would make long text lines that are difficult to read and interfere with scroll bars on smaller screens such as 1280×800.
Make the space between navigation items smaller:
@media (min-width: 992px) {
.navbar-large .nav>li.menu-item-has-description>a {
padding-left: 18px;
padding-right: 18px;
}
}
The theme sets this at 20px. You can lower the value 18px until it meets your needs but make sure it’s still clear where one item stops and the next one starts. I also recommend you keep both values equal to make for an even spacing between items.
Lower the font size of the site title:
.navbar a.navbar-brand {
font-size: 20px;
}
By default this is set to 24px. You can make it as small as you like but make sure it doesn’t get confused with a navigation link.
Later Edit: Another idea is to take advantage of menu item descriptions. Here’s a tutorial that explains how to do it. It’s just a few paragraphs that cover the menu descriptions part.