Nav Bar Collapse Sooner/Responsive Logo

[clientattraction]

Hi,

Our nav bar and logo are both fairly long, so there is a breakpoint where the nav bar and logo both do not fit on the screen, but before the hamburger appears. Is it possible to make the hamburger appear earlier, or to make the logo image responsive so it gets smaller during this transition? What is best?

Thanks!

[thai]

@clientattraction

Is it possible to make the hamburger appear earlier, or to make the logo image responsive so it gets smaller during this transition? What is best?

Hi @clientattraction,

It could be achieved with the custom CSS. But please take a look at these situations first:

• Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
• Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
• 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.
• Less 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.
• And here is the custom CSS, it should be put under Theme Options > CSS:

@media (max-width: 1290px){
    .x-nav-wrap.desktop {
        display: none;
    }
    a#x-btn-navbar {
        display: block;
        float: right;
    }
    .x-nav-wrap.mobile {
        display: block;
    }
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
}

Hope it helps

[clientattraction]

@thai

@media (max-width: 1290px){
.x-nav-wrap.desktop {
display: none;
}
a#x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.mobile {
display: block;
}
.x-nav-wrap.mobile.x-collapsed {
display: none;
}
}

Thanks so much! Changing the menu in this instance is not an option, so the css works great.

[christian]

You’re welcome. Thai forgot to say though that custom codes are not official parts of our products therefore they are not included in our product support.

For this case, switching to Pro is recommended because you can build a custom header with it.

Thanks.