[marianoaranParticipant]

Hello,

I haven’t been able to center this navbar for all browser widths. I have 3 logos in the header: 2 on the left and one to the right of the navbar. I’d like all the contents of the navbar to be centered between these logos.

Thanks for your help.

[marianoaranParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

It would be a bit hard to position this for small and medium desktop. You can add this under Custom > CSS in the Customizer.

.x-nav-wrap.desktop {
  display: block;
  margin: 0 auto;
  max-width: 680px;
}

@media only screen and (min-width: 980px) and (max-width: 1399px) {
.x-brand.img {
  width: 100px;
}

.second-logo img {
  height: 80px;
}

.third-logo img {
  height: 50px;
}
.x-nav-wrap.desktop {
  max-width: 500px;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
}
}

Hope this helps.

[marianoaranParticipant]

Thank you very much for your help!

Code added and it centers now. There’s still an issue of the last item in the menu falling when window is narrower.
Any ideas?

[ChristianModerator]

This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principal applied to filling 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 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.
• 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.

Thanks!

[marianoaranParticipant]

Hello Christian. Thnank you for your detailed response 🙂

I understand what you say and they are all valid points; I will see if I can tweak it further. I would be happy if the menu goes down as a whole as opposed to only one item falling down to the next line.

[RupokMember]

Hi there,

I don’t think you are just using my code rather you changed the values and you have some toher codes that’s causing the issue. Let’s use the exact suggested code and remove the following :

.x-brand.img {
  width: 100px;
}
.second-logo img {
  height: 90px;
}

.third-logo img {
  height: 70px;
}

Hope everything will be fine.

Thanks!

[marianoaranParticipant]

Thank you Rupok.

Sorry about the confusion, yes I had to modify it a little bit. I changed length of menu titles as Christian suggested too.

It’s looking much better now and the code you sent was a big help!

You have awesome customer service! 🙂

Thank you!

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts