Navbar floating over first section

[Tierramitica]

My navbar is behaving strangely in LG 980-1199PX view mode.
I am using inline navbar and it looks right in XL view but in LG view the navbar menu elements are pushed below the logo text and hover strangely over the image in my first section.
My site is not live yet so you can’t see it without logging in.

[friech]

Hi Mitica,

Thanks for writing in! This particular situation is a matter of reworking your navbar content to properly fit the container (this is a consideration that must be taken into account with all themes and designs). It is the same principle applied to fill up a room with furniture—there is only so much that can fit into a given space. The following should be considered in these situations:

Logo Size – longer logos will conflict with navigation items as the viewer screen gets narrow down. You can adjust your logo font size under Theme Options > Header

Shorter Menu Label – you should use a short menu navigation label as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save some room for other menu items and logo.

Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.

Fewer Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.

Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate. See Theme Options > Header for header options.

Or you might want to consider your Logo and Navigation Layout to Stacked. If you go this route, please don’t forget to adjust the Navbar Top Height.

Hope it helps,
Cheers!